:root{
      --bg:#14100b; --bg-2:#0f0d09; --card:#1c160e; --muted:#c7a978;
      --accent-1:#f3b84a; --accent-2:#c67212; --accent-3:#8b4a0c;
      --glass:rgba(255,255,255,0.03);
      --radius-sm:10px; --radius-lg:16px;
      --elev:0 8px 28px rgba(8,6,3,0.6);
      --mono:'Space Grotesk',sans-serif; --ui:'Inter',sans-serif;
      --transition:220ms cubic-bezier(.2,.9,.3,1);
      --safe-b:env(safe-area-inset-bottom,0px);
      --safe-t:env(safe-area-inset-top,0px);
    }
    :root[data-theme="light"]{
      --bg:#fbf6ee; --bg-2:#fff9f0; --card:#fff6ea; --muted:#7a4a16;
      --accent-1:#d89428; --accent-2:#b06217; --accent-3:#8a4c14;
      --glass:rgba(0,0,0,0.03); --elev:0 8px 28px rgba(119,63,5,0.08);
    }
    html,body{
      height:100%; margin:0;
      background: radial-gradient(900px 520px at 60% -120px, rgba(198,114,18,.08), transparent 60%), linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
      color:#efe5d0; font-family:var(--ui); line-height:1.32;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      transition: background-color var(--transition), color var(--transition);
    }
    :root[data-theme="light"] body{
      background: radial-gradient(900px 520px at 60% -120px, rgba(216,148,40,.10), transparent 60%), linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
      color:#3a2411;
    }

    .no-outline{ outline:none!important; -webkit-tap-highlight-color: transparent; }
    .no-outline:focus-visible{ box-shadow:0 0 0 3px rgba(198,114,18,.45); border-radius:12px; }

    .app{ display:grid; grid-template-columns:340px 1fr; gap:28px; max-width:1100px; margin: calc(20px + var(--safe-t)) auto 28px; padding:18px; box-sizing:border-box; }
    @media (max-width:960px){ .app{ grid-template-columns:1fr; padding:16px; gap:18px; } }

    .panel{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius: var(--radius-lg); padding:16px; box-shadow: var(--elev);
      border:1px solid rgba(255,255,255,0.03); display:flex; flex-direction:column; gap:14px; min-height:240px;
    }
    :root[data-theme="light"] .panel{
      background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.45));
      border:1px solid rgba(120,53,15,0.08);
    }
    .brand-row{ display:flex; align-items:center; gap:12px; position:relative; }
    .brand-logo{ width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background: linear-gradient(135deg,var(--accent-2),var(--accent-1)); }
    .brand-logo img{ width:34px; height:34px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25)); }
    .brand-title{ font-family:var(--mono); font-weight:700; font-size:1.22rem; letter-spacing:.2px; color:#ffe8b5; }
    :root[data-theme="light"] .brand-title{ color:#3a2411; }
    .brand-sub{ color:var(--muted); font-size:.86rem; margin-top:2px; }

    /* Burger */
    .burger-menu{ position:absolute; right:0; top:0; transform: translateY(-4px); }
    .burger-btn{
      width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
      background: var(--card); color:#ffe8b5; border:1px solid rgba(255,255,255,.06); cursor:pointer;
      box-shadow:none; transition: transform var(--transition), background var(--transition);
    }
    .burger-btn:hover{ transform: translateY(-2px); background:#1f180f; }
    :root[data-theme="light"] .burger-btn{ color:#3a2411; border:1px solid rgba(120,53,15,.12); background:#fff2e1; }
    .burger-icon{ width:20px; height:14px; position:relative; }
    .burger-icon span{ position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:1px; }
    .burger-icon span:nth-child(1){ top:0; } .burger-icon span:nth-child(2){ top:6px; } .burger-icon span:nth-child(3){ top:12px; }

    .burger-modal{ position:fixed; inset:0; z-index:100; pointer-events:none; background: rgba(8,6,3,0.7); opacity:0; transition: opacity var(--transition); }
    .burger-modal.active{ opacity:1; pointer-events:auto; }
    .burger-content{
      position:absolute; top:0; right:0; height:100%; width:280px;
      background: linear-gradient(180deg, rgba(20,16,11,.98), rgba(12,10,8,.98));
      transform: translateX(100%); transition: transform 320ms cubic-bezier(.2,.9,.3,1);
      padding:20px; display:flex; flex-direction:column; gap:16px; border-left:1px solid rgba(255,255,255,.06);
    }
    .burger-modal.active .burger-content{ transform:translateX(0); }
    :root[data-theme="light"] .burger-content{ background: linear-gradient(180deg, rgba(251,246,238,.98), rgba(245,236,222,.98)); border-left:1px solid rgba(120,53,15,.12); }
    .burger-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
    .burger-title{ font-family:var(--mono); font-weight:700; font-size:1.1rem; color:#ffe8b5; }
    :root[data-theme="light"] .burger-title{ color:#3a2411; }
    .burger-close{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--card); color:#ffe8b5; border:1px solid rgba(255,255,255,.08); cursor:pointer; }
    :root[data-theme="light"] .burger-close{ color:#3a2411; border-color: rgba(120,53,15,.15); }

    .burger-actions{ display:flex; flex-direction:column; gap:10px; }
    .burger-action{
      display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px;
      background: var(--card); color:#ffe8b5; border:1px solid rgba(255,255,255,.06);
      cursor:pointer; transition: transform var(--transition), background var(--transition);
      text-decoration:none; font-weight:600;
    }
    .burger-action:hover{ transform: translateY(-2px); background:#1f180f; }
    :root[data-theme="light"] .burger-action{ color:#3a2411; border:1px solid rgba(120,53,15,.12); background:#fff2e1; }
    .burger-action-icon{ width:20px; height:20px; display:grid; place-items:center; font-size:1.1rem; }

    .metrics{ display:flex; gap:10px; align-items:stretch; }
    @media (max-width:640px){ .metrics{ flex-direction:column; } }
    .metric{ flex:1; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-radius:12px; padding:12px; min-height:72px; display:flex; flex-direction:column; justify-content:center; border:1px solid rgba(255,255,255,0.025); }
    :root[data-theme="light"] .metric{ background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.25)); border:1px solid rgba(120,53,15,.08); }
    .metric .label{ font-size:.78rem; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.9px; }
    .metric .value{ font-family:var(--mono); font-weight:700; font-size:1.16rem; color:#ffe8b5; }
    :root[data-theme="light"] .metric .value{ color:#3a2411; }

    .last-wrap{ margin-top:6px; padding:12px; border-radius:12px; background: linear-gradient(90deg, rgba(198,114,18,0.08), rgba(243,184,74,0.05)); border:1px solid rgba(198,114,18,0.09); display:flex; align-items:center; justify-content:space-between; gap:12px; }
    :root[data-theme="light"] .last-wrap{ background: linear-gradient(90deg, rgba(198,114,18,0.12), rgba(243,184,74,0.09)); border:1px solid rgba(198,114,18,0.12); }
    .last-left{ display:flex; flex-direction:column; gap:6px; }
    .last-title{ color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.7px; }
    .last-val{ font-family:var(--mono); font-size:1.02rem; font-weight:700; color:#ffe8b5; }
    :root[data-theme="light"] .last-val{ color:#3a2411; }

    .main-area{ min-height:360px; display:flex; flex-direction:column; gap:14px; }
    .preview{ flex:1; border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)); padding:16px; border:1px solid rgba(255,255,255,.02); box-shadow: 0 10px 24px rgba(2,6,23,.5); display:flex; flex-direction:column; gap:12px; }
    :root[data-theme="light"] .preview{ background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.25)); border:1px solid rgba(120,53,15,.08); box-shadow: 0 10px 24px rgba(119,63,5,.08); }
    .preview-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .preview-h{ font-family:var(--mono); font-weight:700; font-size:1.05rem; color:#ffe8b5; }
    .preview-sub{ color:var(--muted); font-size:.92rem; }
    :root[data-theme="light"] .preview-h{ color:#3a2411; }

    .feed{ display:flex; flex-direction:column; gap:8px; overflow:auto; padding-right:6px; }
    .feed-item{ padding:8px 10px; border-radius:12px; background: rgba(255,255,255,.015); border:1px solid rgba(255,255,255,.02); display:flex; gap:10px; align-items:flex-start; }
    :root[data-theme="light"] .feed-item{ background: rgba(255,255,255,.35); border:1px solid rgba(120,53,15,.08); }
    .badge{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:#1c1306; background: linear-gradient(135deg,var(--accent-2),var(--accent-1)); }
    .feed-body{ display:flex; flex-direction:column; gap:2px; }
    .feed-title{ font-weight:800; font-size:.94rem; color:#ffe8b5; }
    .feed-text{ color:var(--muted); font-size:.9rem; }
    :root[data-theme="light"] .feed-title{ color:#3a2411; }

    .rail{ display:flex; flex-direction:column; gap:12px; min-width:260px; }
    @media (max-width:960px){ .rail{ order:3; min-width:unset; } }
    .card{ padding:12px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.02); box-shadow: 0 8px 20px rgba(2,6,23,.44); }
    :root[data-theme="light"] .card{ background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.25)); border:1px solid rgba(120,53,15,.08); box-shadow: 0 8px 20px rgba(119,63,5,.08); }
    .label{ font-size:.78rem; color:var(--muted); margin-bottom:8px; display:block; }

    select.jar{ width:100%; padding:12px; border-radius:10px; background:var(--card); border:1px solid rgba(255,255,255,.05); color:#ffe8b5; font-weight:600; appearance:none; cursor:pointer; box-shadow: inset 0 -6px 12px rgba(0,0,0,.22); }
    :root[data-theme="light"] select.jar{ border:1px solid rgba(120,53,15,.12); color:#3a2411; box-shadow: inset 0 -6px 12px rgba(119,63,5,.1); }

    .seg{ display:flex; gap:8px; margin-top:6px; }
    .action{ flex:1; padding:10px 12px; border-radius:10px; background:transparent; border:1px dashed rgba(255,255,255,.05); color:#ffe8b5; font-weight:800; cursor:pointer; transition: transform var(--transition); box-shadow:none; }
    .action:hover{ transform: translateY(-2px); border-style:solid; }
    :root[data-theme="light"] .action{ border:1px dashed rgba(120,53,15,.25); color:#3a2411; }
    .action.is-selected{ background: linear-gradient(90deg,var(--accent-1),var(--accent-2)); color:#1c1306; border:none; }

    .cta{ width:80%; align-self:center; margin-top:8px; padding:12px; border-radius:12px; border:none; font-weight:900; font-size:1rem; cursor:pointer; background: linear-gradient(90deg,var(--accent-1),var(--accent-2)); color:#1c1306; box-shadow:none; transition: transform var(--transition); }
    .cta:hover{ transform: translateY(-2px); }
    @media (max-width:520px){ .cta{ position:static; width:100%; } body{ padding-bottom: calc(var(--safe-b) + 0px); } }

    .toast{ position:fixed; left:50%; top:12%; transform:translateX(-50%); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.03); color:#ffe8b5; display:none; z-index:200; }
    :root[data-theme="light"] .toast{ background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65)); border:1px solid rgba(120,53,15,.12); color:#3a2411; }

    /* CHAT */
    .chat-wrap{ position: fixed; inset: 0; z-index: 110; pointer-events: none; }
    .chat-panel{
      position:absolute; top:0; left:0; height:100%; width:100%;
      background: linear-gradient(180deg, rgba(20,16,11,.97), rgba(12,10,8,.97));
      transform: translateX(-100%); transition: transform 320ms cubic-bezier(.2,.9,.3,1), opacity 220ms ease;
      opacity:0; display:grid; grid-template-rows:auto 1fr auto; pointer-events:auto; border-left:1px solid rgba(255,255,255,.06);
    }
    :root[data-theme="light"] .chat-panel{ background: linear-gradient(180deg, rgba(251,246,238,.97), rgba(245,236,222,.97)); border-left:1px solid rgba(120,53,15,.12); }
    .chat-wrap.show .chat-panel{ transform:translateX(0); opacity:1; }
    .chat-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(198,114,18,.08), transparent); }
    :root[data-theme="light"] .chat-head{ border-bottom:1px solid rgba(120,53,15,.12); background: linear-gradient(180deg, rgba(198,114,18,.10), transparent); }
    .chat-title{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:800; color:var(--accent-1); }
    .chat-title img{ width:20px; height:20px; }
    .chat-close{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--card); color:#ffe8b5; border:1px solid rgba(255,255,255,.08); cursor:pointer; box-shadow:none; }
    .chat-close::before{ content:"✕"; font-size:16px; line-height:1; }
    :root[data-theme="light"] .chat-close{ color:#3a2411; border-color: rgba(120,53,15,.15); }
    .chat-scroll{ padding:12px 14px; overflow-y:auto; }
    .cmsg{ max-width:76%; padding:9px 11px; border-radius:12px; margin:8px 0; line-height:1.28; font-weight:600; box-shadow:none; word-break:break-word; }
    .cmsg.me{ margin-left:auto; background: linear-gradient(90deg,var(--accent-1),var(--accent-2)); color:#1c1306; border:1px solid rgba(198,114,18,.28); }
    .cmsg.other{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }
    :root[data-theme="light"] .cmsg.other{ background:#fff; border:1px solid rgba(120,53,15,.15); color:#3a2411; }
    .cmeta{ font-size:.78rem; opacity:.75; margin-top:5px; }

    /* Chat input (smanjen) */
    .chat-input{
      display:grid; grid-template-columns: 80% auto; gap:35px; padding:10px 12px; border-top:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.10); margin-right: 15px;
    }
    :root[data-theme="light"] .chat-input{ border-top:1px solid rgba(120,53,15,.12); background: rgba(255,255,255,.6); }
    .chat-text{
      width:calc(100% - 8px);
      min-height:38px; padding:9px 12px; border-radius:12px; background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14); color:#ffe8b5; font-weight:600;
    }
    :root[data-theme="light"] .chat-text{ background:#fff; color:#3a2411; border:1px solid rgba(120,53,15,.18); }
    .chat-send{
      width:42px; height:38px; align-self:center; border-radius:12px; border:none; display:grid; place-items:center; cursor:pointer;
      background: linear-gradient(135deg,var(--accent-2),var(--accent-1)); color:#1c1306; box-shadow:none;
    }
    .send-icon{
      width:18px; height:18px; display:inline-block; transform: translateX(1px);
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%231c1306" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2 .01 7z"/></svg>') center / contain no-repeat;
      -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%231c1306" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2 .01 7z"/></svg>') center / contain no-repeat;
      background:#1c1306;
    }

    .loader-overlay{ position:fixed; inset:0; display:none; place-items:center; z-index:300; pointer-events:none; background: radial-gradient(420px 320px at 50% 40%, rgba(198,114,18,.08), transparent 60%); transition: opacity .25s ease-in-out; }
    .loader{ width:48px; height:48px; border-radius:50%; border:3px solid rgba(198,114,18,.18); border-top-color: var(--accent-2); animation: spin 900ms ease-in-out 1; }
    @keyframes spin{ 0%{ transform:rotate(0deg); opacity:.0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:rotate(540deg); opacity:0; } }

    @media (max-width:420px){
      .brand-title{ font-size:1.08rem; }
      .burger-btn{ width:40px; height:40px; }
      .burger-content{ width:260px; }
      .chat-send{ width:40px; height:36px; }
      .chat-text{ min-height:36px; }
    }