:root{
    --bg: #171c27;
    --panel: #1e2431;
    --panel-2: #262d3c;
    --line: #333b4e;
    --accent: #b6c6dd;
    --accent-strong: #cbdbeb;
    --accent-ink: #1a2233;
    --user-bubble: #3d5170;
    --user-ink: #eaf1fb;
    --text: #e6ecf6;
    --text-dim: #8d98ae;
    --danger: #bd8a76;
    --shadow-sm: 0 2px 12px rgba(0,0,0,.28);
    --shadow-md: 0 12px 36px rgba(0,0,0,.38);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --player-bg: #10141d;
    --player-line: #262d3c;
  }
  html[data-theme="light"]{
    --bg: #f1f6fc;
    --panel: #ffffff;
    --panel-2: #e6edf7;
    --line: #d3ddec;
    --accent: #5a7196;
    --accent-strong: #3f5578;
    --accent-ink: #ffffff;
    --user-bubble: #b6c6dd;
    --user-ink: #1f2a3d;
    --text: #273343;
    --text-dim: #5f6c84;
    --danger: #a5624a;
    --shadow-sm: 0 2px 10px rgba(40,55,90,.08);
    --shadow-md: 0 14px 34px rgba(40,55,90,.14);
    --player-bg: #e3ebf6;
    --player-line: #d3ddec;
  }
  *{box-sizing:border-box;}
  /* ---------- Scrollbar mengikuti tema (bukan bawaan abu-abu sistem) ---------- */
  html{
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-dim) 55%, transparent) transparent;
  }
  *::-webkit-scrollbar{ width:8px; height:8px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{
    background: color-mix(in srgb, var(--text-dim) 55%, transparent);
    border-radius: 99px;
  }
  *::-webkit-scrollbar-thumb:hover{ background: var(--accent-strong); }
  *::-webkit-scrollbar-corner{ background:transparent; }
  html,body{
    margin:0; padding:0; height:100%; width:100%;
    position:fixed; inset:0;
    background:var(--bg); color:var(--text);
    font-family:'Plus Jakarta Sans', sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior:none;
    transition: background 0.25s ease, color 0.25s ease;
  }
  button{ -webkit-tap-highlight-color:transparent; }
  #app{ height:100vh; height:100dvh; max-width:680px; margin:0 auto; position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%), var(--bg); }
  #app::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;background:linear-gradient(120deg,transparent 0 38%,color-mix(in srgb,var(--accent) 5%,transparent) 50%,transparent 62%);animation:ambient-shift 14s ease-in-out infinite alternate;}
  @keyframes ambient-shift{from{transform:translateX(-5%);opacity:.35}to{transform:translateX(5%);opacity:.7}}

  #topbar button:active, #inputbar button:active, .panel-icon-btn:active, .sheet-close:active,
  .btn-primary:active, .btn-secondary:active, .send-fab:active{ transform:scale(0.93); }

  /* ---------- Top bar (overlay) ---------- */
  #topbar{
    position:absolute; top:0; left:0; right:0; z-index:15;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px;
    background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), transparent);
  }
  #char-name{
    display:flex; align-items:center; gap:0;
    font-family:'Literata', serif; font-weight:500; font-size:18px;
    letter-spacing:0.2px; color:var(--text);
    text-shadow:0 1px 6px color-mix(in srgb, var(--bg) 70%, transparent);
  }
  .char-avatar{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; overflow:hidden; margin-right:10px;
    background:color-mix(in srgb, var(--bg) 40%, transparent); flex-shrink:0;
    border:1px solid color-mix(in srgb, var(--text) 15%, transparent);
  }
  .char-avatar img{ width:100%; height:100%; object-fit:cover; }
  .char-avatar .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
  #char-name-text{ vertical-align:middle; }
  #char-identity{display:flex;flex-direction:column;line-height:1.05;gap:5px;}
  #live-clock{
    font-family:'Plus Jakarta Sans', sans-serif; font-size:10.5px; font-weight:700;
    color:var(--text-dim); letter-spacing:0.3px; margin-top:1px;
    text-shadow:0 1px 6px color-mix(in srgb, var(--bg) 70%, transparent);
  }
  #topbar-actions{ display:flex; align-items:center; gap:2px; }
  #history-btn, #theme-btn, #settings-btn{
    background:color-mix(in srgb, var(--bg) 38%, transparent); border:none; color:var(--text); cursor:pointer;
    padding:8px; border-radius:12px; display:flex; align-items:center;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:transform .12s ease, background .15s ease;
  }
  #history-btn:active, #theme-btn:active, #settings-btn:active{ background:color-mix(in srgb, var(--bg) 60%, transparent); }
  #history-btn svg, #theme-btn svg, #settings-btn svg{ width:18px; height:18px; }
  #theme-btn .icon-moon{ display:none; }
  html[data-theme="light"] #theme-btn .icon-sun{ display:none; }
  html[data-theme="light"] #theme-btn .icon-moon{ display:block; }

  /* ---------- Portrait (full screen) ---------- */
  #portrait-wrap{
    position:absolute; inset:68px 14px 174px; z-index:0;
    background:var(--panel-2); border:1px solid color-mix(in srgb,var(--text) 9%,transparent);
    border-radius:30px; overflow:hidden;
    animation:card-arrive .7s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes card-arrive{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  #portrait{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    background:var(--panel-2);
  }
  #portrait img, #portrait .placeholder{ position:relative; z-index:1; }
  #portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 1.2s ease, filter .6s ease; }
  #portrait-wrap:hover #portrait img{transform:scale(1.025);filter:saturate(1.08);}
  #portrait .placeholder{ display:flex; flex-direction:column; align-items:center; color:var(--text-dim); font-size:13px; text-align:center; padding:0 30px; line-height:1.5; }
  #portrait-fade{
    position:absolute; left:0; right:0; bottom:0; height:52%;
    background:linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, transparent 100%);
    pointer-events:none;
  }
  #portrait.speaking ~ #portrait-fade{ opacity:1; }

  /* ---------- Subtitle overlay ---------- */
  /* ---------- Restored core layout rules ---------- */
  #subtitle-area{position:absolute;left:0;right:0;z-index:10;bottom:calc(env(safe-area-inset-bottom,0px) + 126px);padding:0 16px;display:flex;justify-content:center;pointer-events:none;}
  #subtitle-bubble{
    max-width: 92%;
    background: color-mix(in srgb,var(--bg) 72%,transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease,transform .35s ease;
  }
  #subtitle-bubble.user{background:color-mix(in srgb,var(--user-bubble) 82%,transparent);color:var(--user-ink)}
  #subtitle-bubble.show{opacity:1;transform:translateY(0)}
  #subtitle-typing{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:18px;padding:14px 18px;display:flex;gap:4px;box-shadow:var(--shadow-sm)}
  #subtitle-typing span,.typing span{width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:blink 1.3s infinite}
  #subtitle-typing span:nth-child(2),.typing span:nth-child(2){animation-delay:.2s}
  #subtitle-typing span:nth-child(3),.typing span:nth-child(3){animation-delay:.4s}
  @keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
  .screen-panel{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transform:translateX(101%);transition:transform .32s cubic-bezier(.22,.61,.36,1);will-change:transform;z-index:20}
  .screen-panel.open{transform:translateX(0)}
  #history-overlay{z-index:24}
  #settings-overlay{z-index:20}
  #expr-root-overlay{z-index:21}
  #folder-overlay{z-index:22}
  #charsetup-overlay{z-index:23}
  #accounts-overlay{z-index:23}
  #cloth-root-overlay{z-index:21}
  #cloth-folder-overlay{z-index:22}
  #musik-root-overlay{z-index:21}
  #playlist-detail-overlay{z-index:22}
  .sheet-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;background:color-mix(in srgb,var(--bg) 45%,transparent);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:30}
  .sheet-overlay.open{opacity:1;pointer-events:auto}
  .sheet-panel{transform:translateY(24px);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .sheet-overlay.open .sheet-panel{transform:translateY(0)}
  #emoji-overlay{z-index:30}
  #select-overlay{z-index:35}
  #item-form-overlay{z-index:36}
  #cloth-item-form-overlay{z-index:36}
  #crop-overlay{z-index:40}
  #folder-form-overlay{z-index:36}
  #song-form-overlay{z-index:36}
  #emoji-panel,#select-panel,#item-form-panel,#cloth-item-form-panel,#crop-panel,#notice-panel,#folder-form-panel,#song-form-panel,#loc-panel{
    width: 100%;
    max-height: 90%;
    background: var(--panel);
    box-shadow: var(--shadow-md);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border: 1px solid var(--line);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(env(safe-area-inset-bottom,0px) + 10px);
  }
  #emoji-panel{max-height:54%}
  #select-panel{max-height:60%}
  .sheet-handle{width:36px;height:4px;border-radius:3px;background:var(--line);margin:10px auto 0;flex-shrink:0}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;font-family:'Literata',serif;font-size:15.5px;font-weight:500;color:var(--text);flex-shrink:0}
  .sheet-close{background:var(--panel-2);border:none;color:var(--text-dim);font-size:14px;cursor:pointer;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
  #emoji-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:42px;gap:4px;padding:6px 14px 14px;width:100%;box-sizing:border-box}
  .emoji-tile{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;border-radius:12px;cursor:pointer;border:none;background:none;padding:0}
  .emoji-tile img{width:26px;height:26px;object-fit:cover;border-radius:50%}
  .emoji-tile input{display:none}
  .emoji-tile.add-custom{color:var(--text-dim);background:var(--panel-2);font-size:18px;}
  #starter-chips{
    position: absolute;
    left: 0;
    right: 0;
    z-index: 11;
    bottom: calc(env(safe-area-inset-bottom,0px) + 76px);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 14px;
    scrollbar-width: none;
    transition: opacity .2s ease;
  }
  #starter-chips.hidden{display:none}
  .chip{
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    color: var(--text);
    background: color-mix(in srgb,var(--bg) 78%,transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 8px 14px;
    cursor: pointer;
  }
  #emoji-btn,#mic-btn{
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: color-mix(in srgb,var(--panel) 88%,transparent);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
  }
  #mic-btn.listening{color:var(--danger);border-color:var(--danger);animation:mic-pulse 1.1s infinite}
  @keyframes mic-pulse{0%,100%{opacity:1}50%{opacity:.55}}
  #chat{flex:1;overflow-y:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
  #chat::-webkit-scrollbar{display:none}
  .hist-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-dim);text-align:center;padding:0 40px}
  .hist-empty p{margin:0;font-size:13.5px;line-height:1.55}
  .hist-empty svg{width:44px;height:44px;flex-shrink:0;color:var(--text-dim);}

  /* ---------- Riwayat pesan: baris, avatar, bubble, waktu, aksi ---------- */
  .hist-date-sep{align-self:center;font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--text-dim);background:color-mix(in srgb, var(--panel-2) 85%, transparent);border:1px solid var(--line);padding:5px 13px;border-radius:20px;margin:8px 0 4px;}
  .hist-row{display:flex;align-items:flex-end;gap:8px;max-width:86%;animation:msg-in .28s cubic-bezier(.22,.61,.36,1) both;}
  @keyframes msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .hist-row.user{flex-direction:row-reverse;align-self:flex-end;}
  .hist-row.ai{align-self:flex-start;}
  .hist-avatar{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--panel-2);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);display:flex;align-items:center;justify-content:center;color:var(--text-dim);}
  .hist-avatar img{width:100%;height:100%;object-fit:cover;}
  .hist-bubble-col{display:flex;flex-direction:column;max-width:100%;min-width:0;}
  .hist-row.user .hist-bubble-col{align-items:flex-end;}
  .hist-row.ai .hist-bubble-col{align-items:flex-start;}
  .msg{font-size:14.5px;line-height:1.5;padding:10px 14px;border-radius:var(--radius-md);word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;cursor:pointer;box-shadow:var(--shadow-sm);max-width:100%;transition:filter .15s ease;}
  .msg:active{filter:brightness(0.95);}
  .msg.ai{background:var(--panel-2);color:var(--text);border:1px solid color-mix(in srgb,var(--text) 6%,transparent);border-bottom-left-radius:5px;}
  .msg.user{background:var(--user-bubble);color:var(--user-ink);border-bottom-right-radius:5px;}
  .msg.system-note{align-self:center;background:none;box-shadow:none;border:none;color:var(--text-dim);font-size:12px;text-align:center;cursor:default;padding:4px 10px;max-width:88%;}
  .msg .inline-emoji{width:18px;height:18px;vertical-align:-4px;border-radius:50%;object-fit:cover;}
  .hist-meta{display:flex;align-items:center;gap:8px;margin-top:5px;padding:0 2px;}
  .hist-row.user .hist-meta{flex-direction:row-reverse;}
  .hist-time{font-size:10.5px;font-weight:600;color:var(--text-dim);flex-shrink:0;letter-spacing:.2px;}
  .hist-actions{display:flex;gap:6px;}
  .hist-actions button{border:0;background:var(--panel-2);color:var(--text-dim);font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:20px;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:background .15s ease,color .15s ease,transform .12s ease;}
  .hist-actions button svg{width:12px;height:12px;flex-shrink:0;}
  .hist-actions button:active{transform:scale(.92);}
  .hist-actions button.danger{color:var(--danger);}
  .typing{display:flex;gap:4px;align-items:center;background:var(--panel-2);border:1px solid color-mix(in srgb,var(--text) 6%,transparent);border-radius:var(--radius-md);border-bottom-left-radius:5px;padding:13px 15px;box-shadow:var(--shadow-sm);}
  #hist-toast{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%,14px);
    background: color-mix(in srgb, var(--bg) 30%, black 55%);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease,transform .22s ease;
    z-index: 40;
    max-width: 80%;
    text-align: center;
  }
  #hist-toast.show{opacity:1;transform:translate(-50%,0);}
  #history-search-row{display:none;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);flex-shrink:0;}
  #history-search-row.open{display:flex;}
  #history-search-row svg{width:18px;height:18px;color:var(--text-dim);flex-shrink:0;}
  #history-search-row input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--text);outline:0;padding:6px 0;}
  #history-search-row button{width:26px;height:26px;flex-shrink:0;border-radius:50%;border:0;background:var(--panel-2);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;padding:0;}
  .panel-header{display:flex;align-items:center;gap:10px;padding:14px 10px 14px 6px;border-bottom:1px solid var(--line);flex-shrink:0}
  .panel-header h2{font-family:'Literata',serif;font-weight:500;font-size:17.5px;margin:0;flex:1}
  .panel-header button{background:none;border:0;color:var(--text);cursor:pointer;padding:8px;display:flex}
  .panel-header button svg{width:21px;height:21px}
  .panel-header-actions{display:flex;align-items:center;gap:2px;}
  #inputbar{
    position:absolute; left:0; right:0; bottom:0; z-index:12;
    display:flex; gap:8px; align-items:flex-end;
    padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 12px);
    background:linear-gradient(to top, var(--bg) 30%, color-mix(in srgb, var(--bg) 70%, transparent) 75%, transparent);
  }
  #text-input{
    flex:1; resize:none; max-height:96px; min-height:42px; line-height:1.4;
    background:color-mix(in srgb, var(--panel) 88%, transparent); border:1px solid var(--line); border-radius:16px;
    color:var(--text); font-family:inherit; font-size:15px; padding:10px 14px;
    outline:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    scrollbar-width:none; -ms-overflow-style:none;
  }
  #text-input::-webkit-scrollbar{ display:none; width:0; height:0; }
  #text-input:focus{ border-color:var(--accent); }
  #send-btn{
    flex-shrink:0; width:46px; height:46px; border-radius:16px; border:1px solid color-mix(in srgb,var(--accent-strong) 55%,transparent);
    background:linear-gradient(145deg,var(--accent-strong),var(--accent)); color:var(--accent-ink); cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 25%,transparent); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  #send-btn:hover{transform:translateY(-2px) rotate(-2deg);filter:brightness(1.08);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 35%,transparent);}
  #send-btn svg{width:21px;height:21px;stroke-width:1.8;transform:rotate(-8deg);}
  #send-btn:active{ opacity:0.85; }
  #send-btn:disabled{ opacity:0.4; }
  #mute-btn{
    flex-shrink:0; width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
    background:color-mix(in srgb, var(--panel) 88%, transparent); color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  #mute-btn.active{ color:var(--accent-strong); border-color:var(--accent); }

  /* ---------- Settings: profile card & section cards ---------- */
  #settings-body{ flex:0 0 auto; overflow:visible; padding:14px 12px 22px; display:flex; flex-direction:column; gap:14px; min-height:0; }
  /* ---------- Doodle background khusus halaman Settings ---------- */
  #settings-overlay{
    position:absolute;
    isolation:isolate;
    background-color:var(--bg);
    background-image:url("icons/settings-doodles.svg");
    background-repeat:repeat;
    background-size:520px 693px;
    background-position:center top;
  }
  #settings-overlay > .panel-header,
  #settings-overlay > #settings-body,
  #settings-overlay > #settings-footer{
    position:relative; z-index:1;
  }
  #settings-profile-card{
    display: grid;
    grid-template-columns: 84px minmax(0,1fr) 72px;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,var(--panel)),var(--panel));
    box-shadow: var(--shadow-sm);
    animation: card-arrive .55s ease both;
  }
  #settings-profile-card > *{min-width:0;}
  #settings-profile-card::before{content:'CHARACTER HUB';position:absolute;opacity:0;}
  #settings-profile-card .profile-calendar{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--text-dim);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;min-width:0;text-align:center;}
  #settings-profile-card .profile-calendar span:last-child{max-width:100%;overflow-wrap:anywhere;}
  #settings-profile-card .profile-calendar-icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent-strong);}
  #settings-profile-card .profile-calendar-icon svg{width:21px;height:21px;}
  .settings-avatar{
    width:92px; height:92px; border-radius:50%; overflow:hidden; flex-shrink:0;
    background:var(--panel-2); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
  }
  .settings-avatar img{ width:100%; height:100%; object-fit:cover; }
  .settings-avatar svg{ width:22px; height:22px; color:var(--text-dim); }
  .settings-profile-name{ font-family:'Literata', serif; font-size:16px; font-weight:500; color:var(--text); min-width:0; overflow-wrap:anywhere; }
  #settings-avatar-link{
    border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
    box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent), 0 10px 24px rgba(0,0,0,.18);
    border-radius:50%; cursor:pointer; padding:0;
    background:var(--panel-2); color:var(--accent-strong);
  }
  #settings-avatar-link-text{background:none;border:0;color:var(--accent-strong);font-family:inherit;font-size:12.5px;font-weight:700;padding:5px 0 0;cursor:pointer;min-width:0;overflow-wrap:anywhere;white-space:normal;line-height:1.35;}

  /* ---------- Foto Profil (terpisah dari File Ekspresi) ---------- */
  #profile-photo-card{
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,var(--panel)),var(--panel));
    border-radius:24px; padding:18px 16px;
  }
  #profile-photo-row{ display:flex; flex-direction:row; align-items:center; gap:16px; }
  #profile-photo-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
  #profile-photo-name{ font-family:'Literata', serif; font-size:17px; font-weight:500; color:var(--text); overflow-wrap:anywhere; }
  #profile-photo-date{ font-size:12px; color:var(--text-dim); }
  #profile-photo-weather{ font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:5px; flex-wrap:wrap; cursor:pointer; }
  #profile-photo-remove-btn{
    position:absolute; bottom:-2px; right:-2px; width:24px; height:24px; border-radius:50%;
    background:var(--danger); color:#fff; border:2px solid var(--panel); cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1; padding:0;
  }
  #profile-photo-avatar{
    width:92px; height:92px; border-radius:50%; overflow:hidden; flex-shrink:0; padding:0; cursor:pointer;
    background:var(--panel-2); display:flex; align-items:center; justify-content:center; position:relative;
    border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
    box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent);
    color:var(--accent-strong);
  }
  #profile-photo-avatar img{ width:100%; height:100%; object-fit:cover; }
  #profile-photo-avatar svg{ width:22px; height:22px; color:var(--accent-strong); }
  #profile-photo-avatar input{ display:none; }
  #karakter-card{ box-shadow:none; }

  .section-card{
    animation:card-arrive .55s ease both;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:18px 16px; display:flex; flex-direction:column; gap:15px; min-width:0; box-shadow:none;
  }
  .section-card.danger-card{ border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); }
  .section-card-head{ display:flex; align-items:center; gap:10px; }
  .section-icon{
    width:30px; height:30px; border-radius:10px; background:color-mix(in srgb, var(--accent) 18%, transparent);
    color:var(--accent-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .section-card.danger-card .section-icon{ background:color-mix(in srgb, var(--danger) 20%, transparent); color:var(--danger); }
  .section-icon svg{ width:15px; height:15px; }
  .section-title{ font-family:'Literata', serif; font-size:14.5px; font-weight:500; color:var(--text); margin:0; }

  #settings-footer{
    flex-shrink:0; padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 14px);
    border-top:1px solid var(--line); background:var(--bg); position:relative; z-index:4;
  }
  #settings-footer .btn-primary{ width:100%; }

  .field label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px; }
  .field input[type=text], .field textarea, .field select{
    width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);
    color:var(--text); font-family:inherit; font-size:14.5px; padding:10px 12px; outline:none;
  }
  .field select{ padding:14px 18px; }
  .select-native-wrap{ position:relative; }
  .select-native-wrap select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding-right:42px;
  }
  .select-native-chevron{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--text-dim); pointer-events:none;
  }
  .field textarea{ resize:vertical; min-height:90px; line-height:1.5; }
  .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--accent); }

  /* ---------- Custom select trigger ---------- */
  .native-select-hidden{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
  .select-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);
    color:var(--text); font-family:inherit; font-size:14.5px; padding:14px 16px;
    cursor:pointer; text-align:left; outline:none; transition:border-color 0.15s ease;
  }
  .select-trigger:active{ border-color:var(--accent); }
  .select-trigger .select-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .select-chevron{ width:16px; height:16px; flex-shrink:0; color:var(--text-dim); transition:transform 0.2s ease; }
  .select-trigger.open .select-chevron{ transform:rotate(180deg); color:var(--accent-strong); }

  #select-overlay{ z-index:35; }
  #select-panel{
    width:100%; max-height:60%; background:var(--panel); box-shadow:var(--shadow-md);
    border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg);
    border:1px solid var(--line); border-bottom:none;
    display:flex; flex-direction:column;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  }
  #select-options{ flex:1; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
  .select-option{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:15px 16px; border-radius:var(--radius-sm); border:none; background:none;
    color:var(--text); font-family:inherit; font-size:15px; text-align:left; cursor:pointer;
  }
  .select-option:active{ background:var(--panel-2); }
  .select-option.selected{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent-strong); font-weight:600; }
  .select-option .check{ width:18px; height:18px; flex-shrink:0; color:var(--accent-strong); opacity:0; }
  .select-option.selected .check{ opacity:1; }
  .select-option-label{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .select-option.inactive{ color:var(--text-dim); }
  .inactive-badge{
    font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
    color:var(--danger); background:color-mix(in srgb, var(--danger) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    flex-shrink:0;
  }
  .keyset-badge{
    font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
    color:var(--accent-strong); background:color-mix(in srgb, var(--accent) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    flex-shrink:0;
  }
  .field-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .field-row label{ margin:0; }
  input[type=range]{ width:150px; accent-color:var(--accent); }

  .expr-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px 10px; }
  .expr-item{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; }
  .expr-avatar{
    position:relative; width:100%; max-width:82px; aspect-ratio:1; margin:0 auto;
    border-radius:50%; border:1.5px solid var(--line); background:var(--panel-2);
    display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer;
  }
  .expr-avatar.filled{ border-color:var(--line); }
  .expr-avatar.empty-folder{ border-style:dashed; }
  .expr-avatar img{ width:100%; height:100%; object-fit:cover; }
  .expr-avatar input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
  .expr-avatar .expr-icon{ width:24px; height:24px; color:var(--text-dim); }
  .expr-badge{
    position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--panel); background:var(--accent); color:var(--accent-ink);
    font-size:10.5px; font-weight:700;
  }
  .expr-badge svg{ width:11px; height:11px; }
  .expr-badge.edit{ background:var(--panel); color:var(--text-dim); border-color:var(--panel); box-shadow:0 0 0 1px var(--line); }
  .expr-name{ font-size:12px; color:var(--text-dim); text-align:center; }
  .expr-item input{ display:none; }

  .btn-primary{
    background:var(--accent); color:var(--accent-ink); border:none; border-radius:var(--radius-sm);
    padding:13px; font-family:inherit; font-weight:700; font-size:14.5px; cursor:pointer;
  }
  .btn-secondary{
    background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:13px; font-family:inherit; font-weight:700; font-size:14.5px; cursor:pointer;
  }
  .btn-secondary:active{ background:var(--line); }
  .btn-ghost{
    background:none; color:var(--danger); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:12px; font-family:inherit; font-weight:600; font-size:13.5px; cursor:pointer;
  }
  .hint{ font-size:12px; color:var(--text-dim); line-height:1.5; }

  /* ---------- API key pengguna (Pengaturan) ---------- */
  #apikey-list{ display:flex; flex-direction:column; gap:10px; }
  .apikey-item{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0; }
  .apikey-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .apikey-name{ font-weight:700; font-size:14px; color:var(--text); }
  .apikey-status{ font-size:11.5px; color:var(--text-dim); white-space:nowrap; }
  .apikey-item.has-key .apikey-status{ color:var(--accent-strong); }
  .apikey-row{ display:flex; gap:8px; align-items:stretch; min-width:0; }
  .apikey-input, .apikey-mask{
    flex:1; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
    color:var(--text); font-family:inherit; font-size:14px; padding:10px 12px; outline:none;
  }
  .apikey-input:focus{ border-color:var(--accent); }
  .apikey-mask{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; letter-spacing:.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .apikey-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .apikey-btn{
    background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:0 14px; min-height:38px; font-family:inherit; font-weight:600; font-size:13px; cursor:pointer;
  }
  .apikey-btn:active{ background:var(--line); }
  .apikey-btn:disabled{ opacity:.55; cursor:default; }
  .apikey-btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
  .apikey-btn.danger{ color:var(--danger); }
  .apikey-msg{ font-size:12px; line-height:1.5; color:var(--text-dim); }
  .apikey-msg:empty{ display:none; }
  .apikey-msg.ok{ color:var(--accent-strong); }
  .apikey-msg.err{ color:var(--danger); }
  .apikey-guide summary{ cursor:pointer; font-size:12.5px; color:var(--accent-strong); }
  .apikey-guide ol{ margin:8px 0 0; padding-left:18px; font-size:12.5px; line-height:1.65; color:var(--text-dim); }
  .apikey-guide .apikey-note{ margin-top:8px; font-size:12px; line-height:1.55; color:var(--text-dim); }
  .apikey-guide a.apikey-link{ display:inline-block; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px; }
  .expr-grid + .hint, .folder-list + .hint{ margin-top:14px; }

  /* ---------- File Musik: pemutar ---------- */
  .player-card{ background:var(--player-bg); border:1px solid var(--player-line); border-radius:var(--radius-lg); padding:16px; display:flex; flex-direction:column; gap:14px; }
  .player-top{ display:flex; align-items:center; gap:13px; min-width:0; }
  .player-cover{ width:60px; height:60px; border-radius:14px; background:var(--panel-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text-dim); overflow:hidden; }
  .player-cover img{ width:100%; height:100%; object-fit:cover; }
  .player-cover svg{ width:24px; height:24px; }
  .player-meta{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
  .player-title{ font-size:14.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player-sub{ font-size:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player-progress{ display:flex; align-items:center; gap:9px; }
  .player-time{ font-size:11px; color:var(--text-dim); flex-shrink:0; min-width:30px; font-variant-numeric:tabular-nums; }
  .player-time.total{ text-align:right; }
  .progress-track{ flex:1; height:4px; border-radius:3px; background:var(--player-line); position:relative; cursor:pointer; touch-action:none; }
  .progress-fill{ position:absolute; inset:0 auto 0 0; width:0%; border-radius:3px; background:var(--accent-strong); }
  .progress-thumb{ position:absolute; top:50%; left:0%; width:11px; height:11px; border-radius:50%; background:var(--accent-strong); transform:translate(-50%,-50%); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-strong) 25%, transparent); }
  .player-controls{ display:flex; align-items:center; justify-content:center; gap:22px; }
  .ctrl-btn{ background:none; border:none; color:var(--text-dim); cursor:pointer; padding:6px; display:flex; align-items:center; justify-content:center; border-radius:10px; position:relative; }
  .ctrl-btn svg{ width:19px; height:19px; }
  .ctrl-btn.small svg{ width:17px; height:17px; }
  .ctrl-btn.active{ color:var(--accent-strong); }
  .ctrl-btn.active::after{ content:''; position:absolute; bottom:0; left:50%; width:4px; height:4px; border-radius:50%; background:var(--accent-strong); transform:translateX(-50%); }
  .repeat-one-tag{ position:absolute; top:-3px; right:-3px; font-size:8px; font-weight:800; color:var(--player-bg); background:var(--accent-strong); border-radius:50%; width:12px; height:12px; display:flex; align-items:center; justify-content:center; line-height:1; }
  .play-btn{ width:50px; height:50px; border-radius:50%; background:var(--accent); color:var(--accent-ink); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .play-btn svg{ width:19px; height:19px; }
  .play-btn .icon-pause{ display:none; }
  .play-btn.playing .icon-play{ display:none; }
  .play-btn.playing .icon-pause{ display:block; }
  .play-btn:disabled{ opacity:.45; }
  .ctrl-btn:disabled{ opacity:.35; pointer-events:none; }

  /* ---------- File Musik: daftar lagu di dalam satu playlist ---------- */
  .song-list{ display:flex; flex-direction:column; gap:9px; }
  .song-row{ display:flex; align-items:center; gap:11px; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md); padding:10px 10px 10px 11px; cursor:pointer; color:var(--text); text-align:left; }
  .song-row.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
  .song-row .song-thumb{ width:38px; height:38px; border-radius:9px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; color:var(--text-dim); }
  .song-row .song-thumb img{ width:100%; height:100%; object-fit:cover; }
  .song-row .song-thumb svg{ width:16px; height:16px; }
  .song-row .song-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .song-row .song-title{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .song-row .song-artist{ font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .song-row .song-playing-icon{ width:15px; height:15px; color:var(--accent-strong); flex-shrink:0; display:none; }
  .song-row.active .song-playing-icon{ display:block; }
  .song-row .song-edit-btn{ flex-shrink:0; background:none; border:none; color:var(--text-dim); padding:7px; display:flex; border-radius:9px; }
  .song-row .song-edit-btn:active{ background:var(--panel-2); }
  .song-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 10px; color:var(--text-dim); text-align:center; }
  .song-empty svg{ width:30px; height:30px; opacity:.6; }
  .song-empty span{ font-size:12.5px; line-height:1.5; }

  /* ---------- File Musik: form tautan lagu ---------- */
  .sheet-body{ padding:14px 18px 6px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; }
  .song-source-tabs{ display:flex; gap:8px; }
  .song-source-tab{ flex:1; padding:10px; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); color:var(--text-dim); font-family:'Plus Jakarta Sans', sans-serif; font-weight:600; font-size:13.5px; cursor:pointer; transition:background .18s ease, color .18s ease; }
  .song-source-tab.active{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
  #song-form-file-field input[type="file"]{ width:100%; font-size:13px; color:var(--text-dim); }
  .url-row{ display:flex; align-items:center; gap:8px; }
  .url-row input{ flex:1; min-width:0; }
  .test-btn{ flex-shrink:0; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--panel-2); color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .test-btn.playing{ color:var(--accent-strong); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
  .test-btn .icon-pause{ display:none; }
  .test-btn.playing .icon-play{ display:none; }
  .test-btn.playing .icon-pause{ display:block; }
  .form-status{ font-size:12px; color:var(--text-dim); line-height:1.4; }
  .form-status.error{ color:var(--danger); }
  .form-cover-row{ display:flex; align-items:center; gap:12px; }
  .form-cover-thumb{ width:52px; height:52px; border-radius:12px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; color:var(--text-dim); overflow:hidden; flex-shrink:0; border:1px solid var(--line); }
  .form-cover-thumb img{ width:100%; height:100%; object-fit:cover; }
  .form-cover-thumb svg{ width:20px; height:20px; }
  .form-cover-text{ font-size:11.5px; color:var(--text-dim); line-height:1.5; }

  /* ---------- Suara (settings, pratinjau) ---------- */
  .slider-with-value{ display:flex; align-items:center; gap:8px; }
  .slider-with-value input[type=range]{ width:110px; }
  .slider-value{ font-size:12px; color:var(--text-dim); min-width:40px; text-align:right; flex-shrink:0; }
  .voice-preview-btn{
    margin-top:2px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:12px; font-family:inherit; font-weight:600; font-size:13.5px; cursor:pointer;
    transition:color .15s ease, border-color .15s ease;
  }
  .voice-preview-btn.speaking{ color:var(--accent-strong); border-color:var(--accent); }
  .voice-preview-btn:disabled{ opacity:.5; cursor:not-allowed; }
  .voice-preview-btn:active:not(:disabled){ transform:scale(0.98); }
  .voice-preview-btn .icon-speak{ flex-shrink:0; font-size:16px; width:16px; line-height:1; }
  .voice-preview-btn.speaking .icon-speak{ animation:voice-pulse 1s ease-in-out infinite; }
  @keyframes voice-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

  /* ---------- Sumber suara: perangkat vs online ---------- */
  .voice-source-toggle{ display:flex; gap:6px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px; }
  .voice-source-toggle button{ display:flex; align-items:center; justify-content:center; gap:6px;
    flex:1; border:none; background:none; color:var(--text-dim); font-family:inherit; font-weight:700; font-size:12.5px;
    padding:9px 6px; border-radius:calc(var(--radius-sm) - 4px); cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .voice-source-toggle button.active{ background:var(--accent); color:var(--accent-ink); }
  .voice-source-hint{ font-size:11.5px; color:var(--text-dim); line-height:1.5; margin-top:6px; }
  .voice-source-hint.warn{ color:var(--danger); }
  .voice-lang-row{ margin-bottom:10px; }

  .expr-file-btn{
    display:flex; animation:card-arrive .5s ease both; align-items:center; gap:12px; width:100%;
    background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:14px 16px; cursor:pointer; color:var(--text); font-family:inherit;
    text-align:left;
  }
  .expr-file-btn:active{
    background:color-mix(in srgb, var(--accent) 20%, transparent);
    border-color:var(--accent);
  }
  .expr-file-btn:active .expr-file-icon{ background:color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent-strong); }
  .expr-file-btn:active .expr-file-label{ color:var(--accent-strong); }
  .expr-file-btn:active .expr-file-chevron{ color:var(--accent-strong); }
  .expr-file-btn .expr-file-icon{
    width:38px; height:38px; border-radius:10px; background:var(--panel);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text-dim);
  }
  .expr-file-btn .expr-file-icon svg{ width:20px; height:20px; }
  .expr-file-btn .expr-file-label{ flex:1; font-size:14.5px; font-weight:600; }
  .expr-file-btn .expr-file-count{ font-size:12.5px; color:var(--text-dim); }
  .expr-file-btn .expr-file-chevron{ width:16px; height:16px; color:var(--text-dim); flex-shrink:0; }

  /* ---------- Daftar folder ---------- */
  .folder-list{ display:flex; flex-direction:column; gap:10px; }
  .folder-bar{
    display:flex; align-items:center; gap:12px; width:100%;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:14px 16px; cursor:pointer; color:var(--text); font-family:inherit;
    text-align:left;
  }
  .folder-bar:active{ background:color-mix(in srgb, var(--accent) 20%, transparent); border-color:var(--accent); }
  .folder-bar .folder-bar-icon{
    width:38px; height:38px; border-radius:10px; background:var(--panel-2);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; color:var(--text-dim);
  }
  .folder-bar .folder-bar-icon img{ width:100%; height:100%; object-fit:cover; }
  .folder-bar .folder-bar-icon svg{ width:20px; height:20px; }
  .folder-bar .folder-bar-label{ flex:1; font-size:14.5px; font-weight:600; }
  .folder-bar .folder-bar-count{ font-size:12.5px; color:var(--text-dim); }
  .folder-bar .folder-bar-chevron{ width:16px; height:16px; color:var(--text-dim); flex-shrink:0; }
  .folder-bar.add-folder{ border-style:dashed; border-color:var(--accent); color:var(--accent-strong); }
  .folder-bar.add-folder .folder-bar-icon{ background:color-mix(in srgb, var(--accent) 24%, transparent); color:var(--accent-strong); }
  .folder-bar.add-folder .folder-bar-label{ color:var(--accent-strong); }
  .folder-bar.add-folder:active{ background:color-mix(in srgb, var(--accent) 26%, transparent); }
  #expr-root-body{ flex:1; overflow-y:auto; padding:18px 16px 32px; display:flex; flex-direction:column; gap:16px; }
  #folder-body{ flex:1; overflow-y:auto; padding:18px 16px 32px; display:flex; flex-direction:column; gap:22px; }
  #folder-rename-btn{ background:none; border:none; color:var(--text-dim); cursor:pointer; padding:8px; display:flex; border-radius:10px; }
  #folder-rename-btn svg{ width:19px; height:19px; }
  .folder-bar.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
  #cloth-root-body{ flex:1; overflow-y:auto; padding:18px 16px 32px; display:flex; flex-direction:column; gap:16px; }
  #cloth-folder-body{ flex:1; overflow-y:auto; padding:18px 16px 32px; display:flex; flex-direction:column; gap:22px; }
  #musik-root-overlay .body-scroll{ flex:1; overflow-y:auto; padding:18px 16px 32px; display:flex; flex-direction:column; gap:18px; }
  #playlist-detail-overlay .body-scroll{ flex:1; overflow-y:auto; padding:18px 16px 32px; display:flex; flex-direction:column; gap:16px; }

  /* ---------- Akun Karakter ---------- */
  #accounts-body{ flex:1; overflow-y:auto; padding:18px 16px 32px; display:flex; flex-direction:column; gap:16px; }
  .accounts-intro{ font-size:13px; color:var(--text-dim); line-height:1.5; margin:0; }
  .acct-bar{ display:flex; align-items:center; gap:8px; width:100%; }
  .acct-bar-main{
    display:flex; align-items:center; gap:12px; flex:1; min-width:0;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:11px 14px; cursor:pointer; color:var(--text); font-family:inherit; text-align:left;
  }
  .acct-bar-main:active{ background:color-mix(in srgb, var(--accent) 20%, transparent); border-color:var(--accent); }
  .acct-bar.active .acct-bar-main{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
  .acct-bar-icon{
    width:44px; height:44px; border-radius:50%; background:var(--panel-2); overflow:hidden;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text-dim);
  }
  .acct-bar-icon img{ width:100%; height:100%; object-fit:cover; }
  .acct-bar-icon svg{ width:22px; height:22px; }
  .acct-bar-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .acct-bar-label{ font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .acct-bar-sub{ font-size:11.5px; color:var(--text-dim); }
  .acct-bar.active .acct-bar-sub{ color:var(--accent-strong); font-weight:600; }
  .acct-bar-del{
    flex-shrink:0; width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
    background:var(--panel); color:var(--danger); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .acct-bar-del svg{ width:17px; height:17px; }
  .acct-bar-del:active{ background:color-mix(in srgb, var(--danger) 18%, transparent); border-color:var(--danger); }
  .acct-add-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    border:1.5px dashed var(--accent); border-radius:var(--radius-md); background:none;
    color:var(--accent-strong); font-family:inherit; font-size:14.5px; font-weight:700;
    padding:14px 16px; cursor:pointer;
  }
  .acct-add-btn svg{ width:18px; height:18px; }
  .acct-add-btn:active{ background:color-mix(in srgb, var(--accent) 16%, transparent); }
  .accounts-danger-zone{
    margin-top:8px; padding:15px 16px; border-radius:var(--radius-md);
    border:1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
    background:color-mix(in srgb, var(--danger) 7%, transparent);
  }
  .accounts-danger-title{ font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--danger); margin-bottom:6px; }
  .accounts-danger-text{ font-size:12.5px; line-height:1.55; color:var(--text-dim); margin:0 0 12px; }
  .accounts-reset-btn{
    width:100%; border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); color:var(--danger);
  }
  .accounts-reset-btn:active{ background:color-mix(in srgb, var(--danger) 16%, transparent); }
  #cloth-folder-rename-btn{ background:none; border:none; color:var(--text-dim); cursor:pointer; padding:8px; display:flex; border-radius:10px; }
  #cloth-folder-rename-btn svg{ width:19px; height:19px; }

  /* ---------- Form overlay (tambah/ubah folder & ekspresi) ---------- */
  #item-form-overlay{ z-index:36; }
  #item-form-panel{
    width:100%; max-height:88%; background:var(--panel); overflow-y:auto; box-shadow:var(--shadow-md);
    border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg);
    border:1px solid var(--line); border-bottom:none;
    display:flex; flex-direction:column;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  }
  #item-form-body{ padding:14px 18px 6px; display:flex; flex-direction:column; gap:16px; }
  #cloth-item-form-body{ padding:14px 18px 6px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; }
  #item-form-photo-field{ display:flex; justify-content:center; }
  .item-form-photo-wrap{ position:relative; display:inline-flex; }
  #item-form-photo-avatar{
    position:relative; width:96px; aspect-ratio:1;
    border-radius:50%; border:1.5px solid var(--line); background:var(--panel-2);
    display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer;
  }
  #item-form-photo-avatar img{ width:100%; height:100%; object-fit:cover; }
  #item-form-photo-avatar .expr-icon{ width:26px; height:26px; color:var(--text-dim); }
  #item-form-photo-avatar input{ display:none; }
  .recrop-btn{
    position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; border-radius:50%;
    background:var(--accent); color:var(--accent-ink); border:2px solid var(--panel);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .recrop-btn svg{ width:13px; height:13px; }
  .chip-select{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip-toggle{
    font-size:13px; color:var(--text-dim); background:var(--panel-2);
    border:1px solid var(--line); border-radius:20px; padding:7px 13px; cursor:pointer;
  }
  .chip-toggle.active{ background:color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent); color:var(--accent-strong); font-weight:600; }

  /* ---------- Crop / sesuaikan foto ---------- */
  #crop-overlay{ z-index:40; }
  #crop-panel{
    width:100%; max-height:90%; background:var(--panel); box-shadow:var(--shadow-md);
    border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg);
    border:1px solid var(--line); border-bottom:none;
    display:flex; flex-direction:column;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  }
  #crop-stage-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 16px 4px; }
  #crop-stage{
    position:relative; overflow:hidden; border-radius:18px; background:#000;
    touch-action:none; cursor:grab;
  }
  #crop-stage.round{ border-radius:50%; }
  #crop-img{
    position:absolute; top:50%; left:50%; transform-origin:center center;
    max-width:none; user-select:none; -webkit-user-drag:none; pointer-events:none;
  }
  .crop-hint{ font-size:12px; color:var(--text-dim); text-align:center; }
  .crop-zoom-row{ display:flex; align-items:center; gap:10px; padding:14px 22px 2px; }
  .crop-zoom-row input[type=range]{ flex:1; width:auto; }
  .crop-zoom-icon{ width:16px; height:16px; color:var(--text-dim); flex-shrink:0; }
  .crop-actions{ display:flex; gap:10px; padding:16px 18px 2px; }
  .crop-actions button{ flex:1; }
  .calendar-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-top:10px;border-radius:16px;background:color-mix(in srgb,var(--panel-2) 82%,transparent);border:1px solid var(--line);}
  .calendar-panel label{font-size:11px;color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px;}
  .calendar-panel strong{font-family:'Literata',serif;font-size:15px;font-weight:500;}
  .calendar-panel input{color:var(--text);background:transparent;border:0;outline:0;font:inherit;color-scheme:dark;max-width:135px;}
  html[data-theme="light"] .calendar-panel input{color-scheme:light;}
  /* Penyesuaian tambahan (breakpoint lebar & elemen yang butuh scoping khusus). */
  #settings-overlay .panel-header{padding:14px 16px 12px 8px;}
  .settings-section,.settings-card,.settings-group{min-width:0;max-width:100%;}
  .field{min-width:0;}
  .field select,.field input,.field textarea{max-width:100%;min-width:0;}
  @media(max-width:480px){
    #portrait-wrap{inset:66px 10px 174px;border-radius:25px;}
    #subtitle-area{bottom:calc(env(safe-area-inset-bottom,0px) + 126px);padding:0 12px;}
    #starter-chips{padding:0 12px;}
    #settings-body{padding:12px 10px 20px;gap:12px;}
    #settings-profile-card{grid-template-columns:76px minmax(0,1fr) 64px;gap:9px;padding:12px 10px;border-radius:24px;}
    .settings-avatar{width:76px;height:76px;}
    #settings-profile-card .profile-calendar{font-size:9px;}
    #settings-profile-card .profile-calendar-icon{width:38px;height:38px;border-radius:12px;}
    .section-card{padding:16px 14px;gap:14px;}
    #settings-footer{padding-left:12px;padding-right:12px;}
  }
  @media(max-width:360px){
    #settings-profile-card{grid-template-columns:68px minmax(0,1fr) 56px;gap:7px;padding:10px 8px;}
    .settings-avatar{width:68px;height:68px;}
    .settings-profile-name{font-size:15px;}
  }

  /* ===== Layar pendek (mode split-screen / jendela browser kecil / zoom) =====
     Sengaja diletakkan paling akhir supaya selalu jadi kata akhir, termasuk saat
     lebar layar JUGA sempit (itulah kondisi split-screen yang sesungguhnya).
     Catatan: hanya JARAK/spacing yang disesuaikan di sini, bukan ukuran teks atau
     elemen yang tiba-tiba hilang — sebab kolom ini juga aktif saat keyboard hp
     muncul (karena viewport meta interactive-widget=resizes-content), jadi kalau
     ada teks yang berubah ukuran/menghilang di sini, itu akan ikut terjadi setiap
     kali user mengetik, bukan cuma saat split-screen. Batas ATAS card karakter
     (#portrait-wrap) juga sengaja tidak pernah diubah di sini — cuma batas bawah
     yang menyesuaikan — supaya card tidak terasa "terdorong" naik-turun saat
     keyboard muncul/hilang. */
  @media (max-height:640px){
    #portrait-wrap{ bottom:150px; }
    #subtitle-area{ bottom:calc(env(safe-area-inset-bottom,0px) + 108px); }
    #starter-chips{ bottom:calc(env(safe-area-inset-bottom,0px) + 64px); }
  }
  @media (max-height:520px){
    #portrait-wrap{ bottom:128px; border-radius:20px; }
    #subtitle-area{ bottom:calc(env(safe-area-inset-bottom,0px) + 92px); }
    #starter-chips{ opacity:0; pointer-events:none; }
    .deco-doodle{ display:none; }
  }
  @media (max-height:400px){
    #portrait-wrap{ bottom:108px; border-radius:16px; }
    #subtitle-area{ bottom:calc(env(safe-area-inset-bottom,0px) + 76px); }
    #topbar{ padding:8px 12px; }
  }

  /* ===== Desktop / laptop =====
     Konten (kartu app) TETAP selebar hp (~680px, seperti semula) dan tidak jadi
     card/bingkai baru — sesuai permintaan. Yang berubah cuma latar di LUAR kartu:
     dulu polos var(--bg) (area kosong kiri-kanan terasa kosong/hampa), sekarang
     dikasih gradasi hangat yang sama seperti nuansa landing page, supaya di
     layar lebar terlihat sengaja didesain "fullscreen", bukan kartu sempit yang
     mengambang di tengah halaman kosong. */
  /* ===== Responsive device behavior =====
     HP: portrait only.
     Tablet/laptop/PC landscape: kiri = aplikasi, kanan = splash kedua. */
  #app-main{
    position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate;
  }
  #landscape-splash{ display:none; }
  #mobile-portrait-lock{ display:none; }

  @media (min-width:900px) and (orientation:landscape){
    html,body{ position:fixed; inset:0; }
    body{ display:flex; align-items:stretch; justify-content:center; background:var(--bg); }
    #app{
      position:relative; width:100vw; max-width:none; height:100dvh;
      margin:0; border-radius:0; border:0; box-shadow:none;
      background:var(--bg); display:flex; overflow:hidden;
    }
    #app::before{ display:none; }
    #app-main{
      flex:0 0 50%; width:50%; min-width:0; height:100%;
      border-right:1px solid color-mix(in srgb,var(--line) 75%,transparent);
      background:var(--bg);
      transition:flex-basis .82s cubic-bezier(.22,.61,.36,1), width .82s cubic-bezier(.22,.61,.36,1), border-color .45s ease;
      will-change:flex-basis,width;
    }
        #landscape-splash{
      position:relative; display:block; flex:0 0 50%; width:50%; min-width:0;
      height:100%; overflow:hidden; background:#d9ebfb;
      opacity:1;
      transition:flex-basis .82s cubic-bezier(.22,.61,.36,1), width .82s cubic-bezier(.22,.61,.36,1), opacity .55s ease;
      will-change:flex-basis,width,opacity;
    }
    #app.landscape-centered #app-main{
      flex-basis:100%; width:100%; border-right-color:transparent;
    }
        #app.landscape-centered #landscape-splash{
      flex-basis:0%; width:0%; opacity:0; pointer-events:none;
    }
    .landscape-splash-card{
      position:absolute; inset:clamp(22px,5vh,54px) clamp(18px,3vw,48px);
      overflow:hidden; border-radius:30px;
      background:#dceeff; border:1px solid rgba(255,255,255,.7);
      box-shadow:0 22px 55px rgba(74,111,151,.18), inset 0 0 0 1px rgba(104,151,201,.12);
    }
    .landscape-splash-image{
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:contain; object-position:center; background:#dceeff;
    }
    .landscape-splash-shade{
      position:absolute; inset:0;
      background:linear-gradient(to bottom,rgba(224,240,255,.04),rgba(54,94,137,.10));
      pointer-events:none; z-index:1;
    }
    #petal-layer-landscape{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
    .snowflake{ display:none; }
    .falling-petal{
      position:absolute; top:-12%; width:var(--petal-w); height:var(--petal-h);
      border-radius:72% 28% 68% 32%;
      background:linear-gradient(145deg,rgba(226,244,255,.98),rgba(119,176,225,.84));
      border:1px solid rgba(255,255,255,.58);
      box-shadow:0 0 8px rgba(117,180,232,.24);
      opacity:var(--petal-opacity);
      transform:rotate(var(--petal-rotate));
      animation:petal-fall var(--petal-duration) linear var(--petal-delay) infinite;
      will-change:transform,opacity;
    }
    @keyframes petal-fall{
      0%{ transform:translate3d(0,-10vh,0) rotate(var(--petal-rotate)); opacity:0; }
      10%{ opacity:var(--petal-opacity); }
      50%{ transform:translate3d(var(--petal-drift),52vh,0) rotate(calc(var(--petal-rotate) + 170deg)); }
      100%{ transform:translate3d(calc(var(--petal-drift) * -1),118vh,0) rotate(calc(var(--petal-rotate) + 360deg)); opacity:0; }
    }
    #landscape-splash.petals-stopped #petal-layer-landscape{ opacity:0; transition:opacity .45s ease; }
    /* Loading berupa strip tipis di bagian BAWAH kartu saja, bukan menutupi seluruh kartu
       dengan blur di tengah -- supaya ilustrasi karakter tetap terlihat. */
        #landscape-loading{
      position:absolute; left:0; right:0; bottom:0; z-index:5;
      display:flex; flex-direction:column; gap:9px;
      padding:28px clamp(20px,4vw,36px) clamp(30px,5vh,42px);
      background:linear-gradient(to top, rgba(218,237,255,.96) 0%, rgba(218,237,255,.88) 48%, rgba(218,237,255,0) 100%);
      opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    #landscape-loading.active{ opacity:1; }
    .landscape-loading-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
    .landscape-loading-track{
      width:100%; height:8px; border-radius:999px; overflow:hidden;
      background:rgba(255,255,255,.46); border:1px solid rgba(103,154,207,.38);
      box-shadow:0 2px 14px rgba(74,126,179,.16);
    }
        #landscape-loading-progress{
      width:0%; height:100%; border-radius:inherit;
      background-color:#5b9bd1;
      box-shadow:0 0 14px rgba(100,169,225,.55);
      transition:width .05s linear;
    }
    .landscape-progress-number{
      flex:0 0 auto; font:700 12px/1 'Plus Jakarta Sans',sans-serif; color:#416b91; letter-spacing:.2px; white-space:nowrap;
    }
    #landscape-loading-text{
      color:#416b91; font:700 10px/1 'Plus Jakarta Sans',sans-serif;
      letter-spacing:1.5px; text-transform:uppercase; text-shadow:0 1px 4px rgba(255,255,255,.8);
      overflow-wrap:anywhere;
    }
  }

  /* HP benar-benar portrait-only: bila pengguna memutar HP, jangan biarkan UI
     ikut menjadi landscape; tampilkan instruksi untuk mengembalikan portrait. */
   @media (max-width:899px){
    html.is-landscape-device #mobile-portrait-lock{
      position:fixed; inset:0; z-index:2000; display:flex;
      align-items:center; justify-content:center; flex-direction:column; gap:10px;
      padding:30px; text-align:center; color:var(--text); background:var(--bg);
    }
    html.is-landscape-device #mobile-portrait-lock .portrait-lock-icon{
      font-size:38px; line-height:1; transform:rotate(90deg);
      color:var(--accent);
    }
    html.is-landscape-device #mobile-portrait-lock strong{ font:700 16px/1.3 'Plus Jakarta Sans',sans-serif; }
    html.is-landscape-device #mobile-portrait-lock span{ max-width:280px; color:var(--text-dim); font-size:12px; line-height:1.5; }
  }
  /* Perangkat dengan mouse (bukan layar sentuh): tambahkan umpan balik hover halus
     supaya terasa hidup, tanpa mengubah apapun untuk pengguna hp/tablet sentuh. */
  @media (hover:hover) and (pointer:fine){
    #landing-start-btn:hover,#landing-settings-btn:hover,#landing-accounts-btn:hover,
    .btn-primary:hover,.btn-secondary:hover{ filter:brightness(1.07); }
    #send-btn:hover,#settings-btn:hover,#history-btn:hover,#mic-btn:hover,#mute-btn:hover,
    .icon-btn:hover,.chip:hover,.folder-bar:hover,.acct-bar-main:hover{
      filter:brightness(1.1);
    }
    button{ cursor:pointer; }
    button:disabled{ cursor:default; }
  }

  /* ===== Landing screen ===== */
  #landing-screen{
    position:absolute; inset:0; z-index:1; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:22px; padding:0 32px;
    background:
      radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 40%),
      radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
      radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 46%),
      var(--bg);
  }
  /* Di layar lebar, kartu di tengah dan latar di luar kartu memakai gradasi yang
     sama persis (lihat @media min-width:900px di atas). background-attachment:fixed
     membuat gradasi di dalam kartu ini dihitung relatif ke VIEWPORT (bukan ke lebar
     kartu 680px-nya sendiri), jadi sambungannya menyatu mulus dengan latar di luar
     kartu, bukan dua gradasi terpisah yang keliatan "nyambung tapi beda". */
  @media (min-width:900px){
    #landing-screen{ background-attachment:fixed; }
  }
  #landing-screen.screen-hidden{ display:none; }
  #chat-screen.screen-hidden{ display:none; }

  /* -- doodle & elemen dekoratif landing -- */
  .landing-doodle{ position:absolute; color:var(--accent); opacity:.5; pointer-events:none; z-index:0; }
  .landing-doodle svg{ width:100%; height:100%; display:block; }
  .doodle-1{ top:8%; left:8%; width:34px; height:34px; animation:doodle-float 6.5s ease-in-out infinite; opacity:.55; }
  .doodle-2{ top:14%; right:10%; width:22px; height:22px; color:var(--text-dim); animation:doodle-float 5.5s ease-in-out infinite .4s; opacity:.4; }
  .doodle-3{ bottom:16%; left:6%; width:26px; height:26px; animation:doodle-spin 12s linear infinite; opacity:.4; }
  .doodle-4{ top:46%; right:5%; width:20px; height:20px; color:var(--text-dim); animation:doodle-float 7s ease-in-out infinite 1s; opacity:.4; }
  .doodle-5{ bottom:9%; right:14%; width:30px; height:30px; animation:doodle-float 6s ease-in-out infinite .7s; opacity:.5; }
  .doodle-6{ top:30%; left:4%; width:16px; height:16px; color:var(--text-dim); animation:doodle-pulse 3.2s ease-in-out infinite; opacity:.45; }
  @keyframes doodle-float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-10px) rotate(6deg);}}
  @keyframes doodle-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  @keyframes doodle-pulse{0%,100%{opacity:.25;transform:scale(1);}50%{opacity:.6;transform:scale(1.25);}}

  /* -- doodle & elemen dekoratif: dipakai ulang di halaman chat & riwayat -- */
  .deco-doodle{ position:absolute; color:var(--accent); opacity:.5; pointer-events:none; z-index:0; }
  .deco-doodle svg{ width:100%; height:100%; display:block; }
  .chat-deco-1{ top:5%; left:5%; width:20px; height:20px; animation:doodle-float 6.5s ease-in-out infinite; opacity:.3; }
  .chat-deco-2{ top:6%; right:6%; width:16px; height:16px; color:var(--text-dim); animation:doodle-pulse 3.4s ease-in-out infinite .5s; opacity:.3; }
  .chat-deco-3{ bottom:6%; right:5%; width:22px; height:22px; animation:doodle-spin 14s linear infinite; opacity:.28; }
  .hist-deco-1{ top:13%; right:6%; width:22px; height:22px; animation:doodle-float 7s ease-in-out infinite; opacity:.22; }
  .hist-deco-2{ top:42%; left:4%; width:16px; height:16px; color:var(--text-dim); animation:doodle-pulse 3.6s ease-in-out infinite .6s; opacity:.2; }
  .hist-deco-3{ bottom:16%; right:8%; width:18px; height:18px; animation:doodle-spin 16s linear infinite; opacity:.2; }

  /* -- hormati preferensi "kurangi gerak", dan jeda animasi saat app disembunyikan
     (mis. pindah aplikasi lain) supaya tidak "lompat" saat kembali dibuka -- */
  html.anim-paused *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }

  #landing-theme-btn{
    position: absolute;
    top: calc(env(safe-area-inset-top,0px) + 16px);
    right: 16px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease,background .2s ease;
  }
  #landing-theme-btn:active{transform:scale(.94);}
  #landing-theme-btn svg{width:18px;height:18px;}
  #landing-theme-btn .icon-moon{display:none;}
  html[data-theme="light"] #landing-theme-btn .icon-sun{display:none;}
  html[data-theme="light"] #landing-theme-btn .icon-moon{display:block;}
  #landing-wordmark{
    position:relative; z-index:1; display:flex; align-items:center; gap:7px;
    font-family:'Literata', serif; font-weight:500; font-size:13.5px; letter-spacing:.5px;
    color:var(--accent-strong); text-transform:uppercase;
  }
  #landing-wordmark svg{ width:15px; height:15px; }

  .landing-avatar-frame{ position:relative; z-index:1; padding:7px; border-radius:50%; }
  .landing-avatar-frame::before{
    content:''; position:absolute; inset:0; border-radius:50%; z-index:0;
    background:conic-gradient(from 120deg, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--accent-strong) 55%, transparent), transparent 60%, color-mix(in srgb, var(--accent) 75%, transparent));
    animation:frame-rotate 10s linear infinite;
  }
  @keyframes frame-rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  .landing-avatar{
    position:relative; z-index:1;
    width:132px; height:132px; border-radius:50%; overflow:hidden; flex-shrink:0;
    background:var(--panel-2); border:3px solid var(--bg);
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
  }
  .landing-avatar img{ width:100%; height:100%; object-fit:cover; }
  .landing-avatar svg{ width:46px; height:46px; color:var(--text-dim); }

  #landing-heading{ position:relative; z-index:1; text-align:center; }
  #landing-title{ font-family:'Literata', serif; font-weight:500; font-size:23px; color:var(--text); margin:0 0 6px; }
  #landing-tagline{ font-size:13.5px; color:var(--text-dim); line-height:1.5; max-width:260px; margin:0 auto; }

  .landing-buttons{ position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; width:100%; max-width:336px; }
  .landing-buttons button{
    padding:15px 20px; border-radius:16px; border:none; cursor:pointer;
    font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:15px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .12s ease;
  }
  .landing-buttons button svg{ width:17px; height:17px; flex-shrink:0; }
  .landing-buttons button:active{ transform:scale(0.97); }
  #landing-start-btn{ background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
  #landing-accounts-btn{ background:var(--panel-2); color:var(--text); border:1px solid var(--line); }
  #landing-settings-btn{ background:var(--panel-2); color:var(--text); border:1px solid var(--line); }

  /* ---------- Baris tombol landing + switch tema di sampingnya ---------- */
  .landing-buttons-row{ position:relative; z-index:1; display:flex; align-items:stretch; gap:12px; width:100%; }
  .landing-buttons-sub{ display:flex; flex-direction:column; gap:12px; flex:1; min-width:0; }
  /* Switch tema: ikon matahari (atas) dan sabit (bawah) SELALU tampil. Tekan matahari -> terang,
     tekan sabit -> gelap. Bola hijau cuma penanda mode yang sedang aktif dan meluncur ke ikon yang dipilih. */
  #landing-theme-switch{
    flex-shrink:0; width:44px; min-height:40px; padding:5px; display:flex;
    border:1px solid var(--line); border-radius:22px;
    background:var(--panel-2); box-shadow:var(--shadow-sm);
    transition:background .25s ease, border-color .25s ease;
  }
  #landing-theme-switch .switch-track{ display:block; position:relative; flex:1; min-width:0; }
  #landing-theme-switch .switch-knob{
    position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
    background:linear-gradient(145deg,var(--accent-strong),var(--accent));
    box-shadow:0 3px 10px rgba(0,0,0,.35);
    transition:top .38s cubic-bezier(.34,1.56,.64,1);
  }
  /* calc(100% - 32px) relatif ke tinggi track yang SEBENARNYA (ikut meregang menyamai tinggi
     3 tombol di sebelahnya), jadi bola selalu presisi menempel di bawah. */
  html[data-theme="dark"] #landing-theme-switch .switch-knob{ top:calc(100% - 32px); }
  #landing-theme-switch .switch-opt{
    position:absolute; left:0; z-index:1; width:32px; height:32px; padding:0; border:0; border-radius:50%;
    background:transparent; color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:color .25s ease, transform .12s ease;
  }
  #landing-theme-switch .switch-opt:active{ transform:scale(.9); }
  #landing-theme-switch .switch-opt.opt-sun{ top:0; }
  #landing-theme-switch .switch-opt.opt-moon{ bottom:0; }
  #landing-theme-switch .switch-opt svg{ width:15px; height:15px; }
  html[data-theme="light"] #landing-theme-switch .opt-sun,
  html[data-theme="dark"] #landing-theme-switch .opt-moon{ color:var(--accent-ink); }

  /* ===== Halaman "Atur Karakter" (khusus foto + nama) ===== */
  #charsetup-body{ flex:1; overflow-y:auto; padding:32px 20px 40px; display:flex; flex-direction:column; align-items:center; gap:10px; }
  #charsetup-body .charsetup-intro{ text-align:center; font-size:13px; color:var(--text-dim); max-width:280px; margin:0 0 14px; line-height:1.5; }
  .charsetup-avatar-wrap{ position:relative; width:132px; height:132px; margin-bottom:8px; }
  .charsetup-avatar{
    width:132px; height:132px; border-radius:50%; overflow:hidden; cursor:pointer;
    background:var(--panel-2); border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
  }
  .charsetup-avatar img{ width:100%; height:100%; object-fit:cover; }
  .charsetup-avatar svg{ width:40px; height:40px; color:var(--text-dim); }
  .charsetup-avatar input{ display:none; }
  .charsetup-avatar-edit{
    position:absolute; right:2px; bottom:2px; width:34px; height:34px; border-radius:50%;
    background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
    border:2px solid var(--bg); pointer-events:none;
  }
  .charsetup-avatar-edit svg{ width:15px; height:15px; }
  .charsetup-field{ width:100%; max-width:320px; }
  #charsetup-footer{
    flex-shrink:0; padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 14px);
    border-top:1px solid var(--line); background:var(--bg);
  }
  #charsetup-footer .btn-primary{ width:100%; }

  /* ===== Notifikasi "atur karakter dulu" ===== */
  #notice-panel{ padding:22px 22px calc(env(safe-area-inset-bottom,0px) + 18px); }
  /* ---- Sheet lokasi cuaca ---- */
  #loc-overlay{ z-index:37; }
  #loc-panel .sheet-body{ gap:12px; padding-bottom:12px; }
  #loc-current{ font-size:13.5px; color:var(--text-dim); line-height:1.5; margin:0; }
  #loc-city-row{ display:flex; gap:8px; align-items:stretch; }
  #loc-city-row .field{ flex:1; min-width:0; }
  #loc-city-row .btn-secondary{ padding:0 16px; }
  #loc-results{ display:flex; flex-direction:column; gap:6px; }
  #loc-results button{ text-align:left; background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; font-family:inherit; font-size:14px; cursor:pointer; }
  #loc-results button:active{ background:var(--line); }
  #loc-msg{ font-size:13px; color:var(--text-dim); line-height:1.5; margin:0; min-height:0; }
  #loc-msg:empty{ display:none; }
  #notice-icon{
    width:46px; height:46px; border-radius:14px; margin-bottom:14px;
    background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent-strong);
    display:flex; align-items:center; justify-content:center;
  }
  #notice-icon svg{ width:23px; height:23px; }
  #notice-title{ font-family:'Literata', serif; font-weight:500; font-size:17px; color:var(--text); margin:0 0 8px; }
  #notice-text{ font-size:14px; color:var(--text-dim); line-height:1.55; margin:0 0 20px; }
  #notice-actions{ display:flex; flex-direction:column; gap:10px; }

  .start-btn-row{ display:flex; align-items:stretch; width:100%; }
  #landing-start-btn{ flex:1; min-width:0; border-radius:16px 0 0 16px; }
  #landing-update-btn{
    position:relative; flex-shrink:0; width:54px; padding:0; border:0;
    border-left:1px solid color-mix(in srgb, var(--accent-ink) 25%, transparent);
    border-radius:0 16px 16px 0; background:var(--accent); color:var(--accent-ink);
    box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  #landing-update-btn svg{ width:19px; height:19px; }
  #landing-update-btn:active{ transform:scale(0.97); }
  .update-badge{
    position:absolute; top:6px; right:8px; width:11px; height:11px; border-radius:50%;
    background:#ff3b3b; border:2px solid var(--panel);
    box-shadow:0 0 0 1px rgba(255,59,59,.55), 0 0 8px rgba(255,59,59,.65);
    display:none; z-index:2;
  }
  .update-badge.show{ display:block; animation:notif-dot-pulse 1.8s ease-in-out infinite; }
  @keyframes notif-dot-pulse{
    0%,100%{ box-shadow:0 0 0 1px rgba(255,59,59,.55), 0 0 8px rgba(255,59,59,.65); }
    50%{ box-shadow:0 0 0 4px rgba(255,59,59,.16), 0 0 10px rgba(255,59,59,.85); }
  }
  #update-overlay{z-index:23}

/* =========================================================
   Vlami AI — Splash Screen & Update/Upgrade 2.0
   ========================================================= */
#splash-screen{
  position:fixed; inset:0; z-index:1000; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#dceeff; opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .64s cubic-bezier(.4,0,.2,1), transform .64s cubic-bezier(.4,0,.2,1), visibility .64s ease;
  will-change:transform,opacity;
}
#splash-screen.is-hidden{
  opacity:0;
  transform:none;
  visibility:hidden;
  pointer-events:none;
}


/* ---------- Modal peringatan jaringan (muncul selama splash screen pertama) ---------- */
.network-modal{
  position:fixed; inset:0; z-index:1001; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(15,25,38,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}
.network-modal.open{ opacity:1; visibility:visible; pointer-events:auto; }
.network-modal-card{
  position:relative; width:min(100%,340px); text-align:center;
  background:#fff; color:#1c2b3a; border-radius:22px; padding:26px 22px 22px;
  box-shadow:0 24px 60px rgba(12,25,43,.32);
  transform:translateY(14px) scale(.97); transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.network-modal.open .network-modal-card{ transform:translateY(0) scale(1); }
.network-modal-icon{
  width:52px; height:52px; margin:0 auto 12px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
}
.network-modal-icon svg{ width:26px; height:26px; }
.network-modal-icon-warn{ background:rgba(230,168,44,.16); color:#c98a12; }
.network-modal-icon-bad{ background:rgba(219,73,73,.16); color:#c93a3a; }
.network-modal-card h3{ margin:0 0 8px; font-family:'Literata',serif; font-size:17px; font-weight:600; }
.network-modal-card p{ margin:0; font-size:13px; line-height:1.55; color:#4c5c6c; }
#network-bad-retry-btn{
  margin-top:16px; width:100%; border:0; border-radius:14px; padding:12px 15px;
  background:#c93a3a; color:#fff; font-family:inherit; font-weight:800; font-size:13px; cursor:pointer;
  transition:transform .12s ease;
}

.splash-backdrop{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#dff1ff 0%,#cfe7fa 52%,#e4f4ff 100%);
}
.splash-backdrop::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.54),rgba(196,224,247,.10) 52%,rgba(91,147,197,.08));
}
.splash-content{
  position:relative; z-index:3; width:min(88vw,390px); height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:70px 24px 54px; text-align:center;
}
.splash-logo-wrap{
  width:142px; height:142px; display:flex; align-items:center; justify-content:center;
  margin-top:-8vh; margin-bottom:8px;
}
.splash-wolf-logo{
  width:100%; height:100%; object-fit:contain;
  filter:contrast(1.28) saturate(1.08) brightness(1.05) drop-shadow(0 8px 16px rgba(45,74,110,.22));
  mix-blend-mode:multiply;
}
.splash-brand{
  font-family:'Literata',serif; font-size:38px; line-height:1.05; font-weight:600;
  letter-spacing:-1px; color:#4f78a1; text-shadow:0 2px 8px rgba(255,255,255,.75);
}
.splash-tagline{ display:none; }
/* Loading benar-benar di bagian bawah layar (bukan ikut ke tengah bersama logo/brand),
   supaya karakter/ilustrasi di tengah tidak pernah tertutup. */
.splash-loading{
  position:absolute;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 28px);
  transform:translateX(-50%) translateY(6px);
  width:min(340px,84vw);
  z-index:4;

  border-top:1px solid rgba(91,148,200,.28);
  padding-top:14px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility 0s linear .35s;
}

#splash-screen.splash-ready .splash-loading{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:translateX(-50%) translateY(0);

  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility 0s linear 0s;
}
.splash-loading-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.splash-loading-label{ color:#6486a8; font-size:10px; letter-spacing:1.4px; font-weight:700; text-transform:uppercase; overflow-wrap:anywhere; }
.splash-progress-number{ flex:0 0 auto; font:700 13px/1 'Plus Jakarta Sans',sans-serif; color:#4f78a1; letter-spacing:.2px; white-space:nowrap; }
/*
 * Progress splash:
 * visualisasi seperti AIR yang dituangkan ke dalam wadah.
 *
 * Lima lapisan horizontal mengisi dari kiri ke kanan.
 * Lapisan atas mencapai batas lebih dahulu,
 * kemudian lapisan di belakang menyusul.
 */
.splash-progress-track{
  height:9px;
  width:100%;
  margin:0 auto;

  border-radius:5px;

  background:rgba(255,255,255,.60);

  border:1px solid rgba(91,148,200,.40);

  overflow:hidden;

  box-shadow:0 2px 8px rgba(79,110,145,.10);
}

#splash-progress{
  width:0%;
  height:100%;

  border-radius:4px;

  background:#3f8fd1;

  background-image:none;

  box-shadow:0 0 12px rgba(103,157,205,.40);

  transition:width .08s linear;
}

/* Animasi menunggu Network Retry:
   lebar dan angka progress tidak berubah.
   Hanya kilau di dalam bagian progress yang bergerak. */
#splash-progress{
  position:relative;
  overflow:hidden;
}

#splash-progress::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:45%;

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 20%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,.08) 80%,
    transparent 100%
  );

  transform:translateX(-130%);
  opacity:0;
  pointer-events:none;
}

.splash-progress-track.is-waiting #splash-progress::after{
  opacity:1;
  animation:splash-progress-wait 1.1s ease-in-out infinite;
}

@keyframes splash-progress-wait{
  from{
    transform:translateX(-130%);
  }

  to{
    transform:translateX(300%);
  }
}


#splash-petal-layer{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
#splash-petal-layer .falling-petal{ z-index:2; }

/* Mobile splash: gunakan ilustrasi balkon yang diberikan pengguna, tanpa logo serigala.
   Nama "Vlami AI" DITEMPEL DI ATAS layar (bukan ikut center secara vertikal bersama .splash-content)
   supaya posisinya pasti/konsisten dan tidak bisa jatuh di area wajah karakter pada ilustrasi,
   berapa pun tinggi layar atau di mana pun karakter itu digambar dalam ilustrasi balkon. */
@media (max-width:899px){
  .splash-backdrop{
    background-color:#dceeff;
    background-image:linear-gradient(to bottom,rgba(231,245,255,.04),rgba(199,225,247,.16)),url('/splash/splash-bg.png');
    /* cover (bukan contain) supaya ilustrasi selalu menutupi SELURUH layar tanpa ada sisi
       kosong/letterbox, berapa pun rasio layar HP-nya. position "center top" supaya kalau
       ada bagian yang terpotong karena rasio, yang dikorbankan adalah bagian bawah gambar
       dulu, bukan bagian atas tempat karakter biasanya berada. */
    background-repeat:no-repeat; background-position:center top; background-size:cover;
  }
  .splash-backdrop::after{ background:linear-gradient(to bottom,rgba(223,241,255,.02),rgba(199,225,247,.10)); }
  .splash-logo-wrap{ display:none; }
  .splash-brand{
    position:absolute; top:calc(env(safe-area-inset-top,0px) + 22px); left:50%;
    transform:translateX(-50%); z-index:5; margin-top:0;
    font-size:22px; letter-spacing:-.4px; white-space:nowrap;
    /* Kartu kaca semi-transparan di belakang nama, supaya jelas terbaca sebagai elemen UI
       yang mengambang di atas ilustrasi -- bukan tertempel/menyatu dengan wajah karakter,
       berapa pun posisi karakter di gambar. */
    padding:9px 22px; border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.46));
    box-shadow:0 8px 20px rgba(45,74,110,.16);
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  }
  .splash-loading{ width:min(300px,80vw); bottom:calc(env(safe-area-inset-bottom,0px) + 22px); }
}

@media (min-width:900px){
  /* Splash pertama desktop, dan tablet landscape: full screen icy-blue, logo + nama + progress. */
  #splash-screen .splash-backdrop{ background:linear-gradient(180deg,#e6f4ff 0%,#cfe7fa 55%,#e4f4ff 100%); }
}

/* Tablet dalam posisi potret (mirip cara pakai HP): pakai perlakuan splash yang sama seperti
   HP (ilustrasi penuh layar + kartu nama mengambang), bukan splash desktop yang kosong tanpa
   ilustrasi, supaya splash tetap menutupi seluruh layar di tablet juga. Ditulis SETELAH blok
   desktop di atas dan dengan selektor yang sama spesifiknya, supaya menang untuk rentang lebar
   900–1180px saat orientasinya potret. */
@media (min-width:900px) and (max-width:1180px) and (orientation:portrait){
  #splash-screen .splash-backdrop{
    background-color:#dceeff;
    background-image:linear-gradient(to bottom,rgba(231,245,255,.04),rgba(199,225,247,.16)),url('/splash/splash-bg.png');
    background-repeat:no-repeat; background-position:center top; background-size:cover;
  }
  .splash-backdrop::after{ background:linear-gradient(to bottom,rgba(223,241,255,.02),rgba(199,225,247,.10)); }
  .splash-logo-wrap{ display:none; }
  .splash-brand{
    position:absolute; top:calc(env(safe-area-inset-top,0px) + 26px); left:50%;
    transform:translateX(-50%); z-index:5; margin-top:0;
    font-size:26px; letter-spacing:-.4px; white-space:nowrap;
    padding:10px 26px; border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.46));
    box-shadow:0 8px 20px rgba(45,74,110,.16);
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  }
  .splash-loading{ width:min(360px,70vw); bottom:calc(env(safe-area-inset-bottom,0px) + 26px); }
}

/* Informasi update terbaru: modal singkat di atas Landing Page. */
#release-overlay{ z-index:95; align-items:center; padding:24px; background:rgba(21,31,45,.38); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
#release-panel{
  position:relative; width:min(100%,390px); max-height:min(78dvh,620px); overflow:auto;
  background:color-mix(in srgb,var(--panel) 96%,transparent); color:var(--text);
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:26px;
  padding:30px 22px 22px; box-shadow:0 24px 70px rgba(12,25,43,.28);
  transform:translateY(18px) scale(.98); transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
#release-overlay.open #release-panel{ transform:translateY(0) scale(1); }
.release-close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--panel-2); color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.release-close svg{ width:15px; height:15px; }
.release-icon{ width:46px; height:46px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--accent-strong); margin-bottom:13px; }
.release-icon svg{ width:22px; height:22px; }
.release-kicker{ font-size:11px; font-weight:800; letter-spacing:1.4px; color:var(--accent-strong); }
#release-title{ margin:7px 38px 8px 0; font-family:'Literata',serif; font-size:21px; line-height:1.3; font-weight:600; }
#release-summary{ margin:0 0 13px; color:var(--text-dim); font-size:13.5px; line-height:1.6; }
.release-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:11.5px; color:var(--text-dim); margin-bottom:16px; }
.release-meta span:first-child{ color:var(--accent-strong); font-weight:800; }
.release-highlights{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.release-highlight{ display:flex; gap:9px; align-items:flex-start; padding:10px 11px; border-radius:14px; background:color-mix(in srgb,var(--accent) 9%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); font-size:12.5px; line-height:1.5; }
.release-highlight-dot{ flex:0 0 auto; width:7px; height:7px; margin-top:6px; border-radius:50%; background:var(--accent-strong); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent); }
.release-more-hint{ margin:14px 0 10px; color:var(--text-dim); font-size:12px; text-align:center; }
.release-detail-btn{ width:100%; border:0; border-radius:15px; padding:13px 15px; background:var(--accent); color:var(--accent-ink); font-family:inherit; font-weight:800; font-size:13px; cursor:pointer; box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 28%,transparent); }
.release-detail-btn span{ margin-left:5px; transition:transform .2s ease; display:inline-block; }
.release-detail-btn:active span{ transform:translateX(3px); }

/* Halaman Update & Upgrade — timeline */
#update-body{ padding:20px 18px 34px; }
.update-intro{ padding:2px 2px 22px; }
.update-intro-kicker{ font-size:11px; letter-spacing:1.3px; font-weight:800; color:var(--accent-strong); text-transform:uppercase; }
.update-intro h3{ margin:6px 0 5px; font-family:'Literata',serif; font-size:22px; font-weight:600; color:var(--text); }
.update-intro p{ margin:0; font-size:13px; line-height:1.55; color:var(--text-dim); }
.update-timeline{ position:relative; padding-left:27px; }
.update-timeline::before{ content:''; position:absolute; left:7px; top:13px; bottom:22px; width:1px; background:linear-gradient(to bottom,var(--accent),var(--line)); }
.update-entry{ position:relative; margin:0 0 18px; border:1px solid var(--line); border-radius:22px; overflow:visible; background:var(--panel); box-shadow:0 8px 22px rgba(0,0,0,.05); }
.update-entry::before{ content:''; position:absolute; left:-26px; top:22px; width:10px; height:10px; border-radius:50%; background:var(--panel); border:2px solid var(--accent-strong); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent); z-index:2; }
.update-entry.latest{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 10%,transparent); }
.update-entry.latest::before{ background:var(--accent-strong); }
.update-entry summary{
  display:block;
  cursor:pointer;
  list-style:none;
}

.update-entry summary.update-entry-head{
  padding:18px 20px 18px;
  box-sizing:border-box;
}

.update-entry summary::-webkit-details-marker{
  display:none;
}

.update-entry-top{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.update-version-group{ display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
.update-version{ font-family:'Literata',serif; font-weight:700; font-size:16px; color:var(--accent-strong); white-space:nowrap; }
.update-latest-label,.update-release-label{ font-size:9px; letter-spacing:.8px; font-weight:800; border-radius:999px; padding:4px 7px; white-space:nowrap; }
.update-latest-label{ color:var(--accent-ink); background:var(--accent); }
.update-release-label{ color:var(--accent-strong); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); }
.update-chevron{ flex:0 0 auto; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim); transform:rotate(-45deg); transition:transform .2s ease; }
.update-entry[open] .update-chevron{ transform:rotate(45deg); }
.update-entry-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:8px; font-size:11px; color:var(--text-dim); }
.update-date,.update-time{ font-size:11px; color:var(--text-dim); }
.update-meta-separator{ opacity:.55; }
.update-summary{ margin:10px 0 0; padding-right:5px; font-size:13px; line-height:1.55; color:var(--text); font-weight:600; overflow-wrap:anywhere; }
.update-detail{ padding:0 17px 17px; }
.update-info{ margin:0 0 13px; padding:11px 12px; border-radius:13px; background:var(--panel-2); font-size:12px; line-height:1.55; color:var(--text-dim); }
.update-cat{ margin:13px 0 6px; padding:0; font-size:10px; letter-spacing:1px; font-weight:800; text-transform:uppercase; color:var(--accent-strong); }
.update-notes{ margin:0; padding:0 0 0 17px; font-size:12.5px; line-height:1.58; color:var(--text); }
.update-notes li{ margin:4px 0; padding-left:2px; overflow-wrap:anywhere; }

@media (max-width:430px){
  #release-overlay{ padding:16px; }
  #release-panel{ border-radius:23px; padding:28px 18px 18px; }
  .splash-brand{ font-size:38px; }
}

/* Splash correction 1.2.4: nama Vlami AI di splash dihapus.
   Background awal sebelum splash dibuat gelap lewat critical-startup-style di HTML;
   background splash tetap memakai ilustrasi sky-blue aslinya. */
#splash-screen .splash-brand{display:none !important;}

/* Tablet portrait: pakai layout HP (memenuhi layar), bukan kartu 680px di tengah seperti desktop. */
@media (min-width:600px) and (orientation:portrait){
  #app{ max-width:none; width:100%; margin:0; }
}

/* =========================================================
   TABLET PORTRAIT SPLASH
   Gambar harus terlihat UTUH, tidak boleh terpotong.
   ========================================================= */
/* Splash tablet portrait: gambar khusus tablet harus terlihat UTUH. */
@media (min-width:600px) and (max-width:1180px) and (orientation:portrait){
  #splash-screen .splash-backdrop{
    background-color:#dceeff;

    background-image:
      linear-gradient(
        to bottom,
        rgba(231,245,255,.04),
        rgba(199,225,247,.16)
      ),
      url('/splash/splash-bg-tab-potrait.png');

    background-repeat:no-repeat;

    /* Mengikuti seluruh ukuran layar tablet */
    background-position:center center;
    background-size:100% 100%;
  }
}

/* =========================================================
   TABLET LANDSCAPE SPLASH
   Splash memenuhi seluruh layar.
   
   pointer: coarse digunakan agar laptop/desktop tidak ikut
   terkena perubahan layout ini.
   ========================================================= */
/* =========================================================
   TABLET LANDSCAPE SPLASH — FULLSCREEN
   ========================================================= */

@media (min-width:900px) and (max-width:1180px) and (orientation:landscape){

  /*
   * App tetap memenuhi viewport.
   */
  #app{
    position:relative;
    width:100vw;
    max-width:none;
    height:100dvh;
    margin:0;

    border:0;
    border-radius:0;
    box-shadow:none;

    overflow:hidden;
  }

  /*
   * Aplikasi berada di belakang splash.
   * Saat splash selesai, aturan
   * .landscape-centered akan membuatnya 100%.
   */
  #app-main{
    width:100%;
    height:100%;
  }

  /*
   * SPLASH LANDSCAPE
   * Menjadi overlay fullscreen.
   */
  #landscape-splash{
    position:absolute;

    inset:0;

    display:block;

    width:100%;
    height:100%;

    flex:none;

    z-index:9999;

    overflow:hidden;

    background:#dceeff;

    opacity:1;
    pointer-events:auto;

    transition:
      opacity .55s ease;
  }

  /*
   * Hilangkan bentuk kartu.
   * Splash sekarang benar-benar satu layar.
   */
  .landscape-splash-card{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    border:0;
    border-radius:0;

    background:#dceeff;

    box-shadow:none;
  }

  /*
   * GAMBAR LANDSCAPE TABLET
   *
   * contain = SELURUH GAMBAR TERLIHAT.
   * Tidak ada bagian gambar yang dipotong.
   */
  .landscape-splash-image{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center center;

    background:#dceeff;
  }

  /*
   * Efek overlay tetap ada.
   */
  .landscape-splash-shade{
    position:absolute;

    inset:0;

    background:
      linear-gradient(
        to bottom,
        rgba(224,240,255,.04),
        rgba(54,94,137,.10)
      );

    pointer-events:none;
    z-index:1;
  }

  /*
   * Loading tetap berada di bawah gambar.
   */
  #landscape-loading{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:5;
  }

  /*
   * Setelah loading selesai,
   * splash menghilang seluruhnya.
   */
  #app.landscape-centered #landscape-splash{
    inset:0;

    width:100%;
    height:100%;

    opacity:0;

    pointer-events:none;
  }

  /*
   * Setelah splash hilang,
   * aplikasi mengambil seluruh layar.
   */
  #app.landscape-centered #app-main{
    flex-basis:100%;
    width:100%;

    border-right-color:transparent;
  }
}