:root{
  --bg: #f4ffe9;
  --bg2:#d9ffea;
  --surface:#ffffff;
  --text:#111;
  --muted:#7a7a7a;
  --primary:#18b7b0; /* teal for bottom bar */
  --accent:#ffb457;  /* tab underline */
  --ring:#000;
  --corner:22px;
}

[data-theme="dark"]{
  --bg:#0e1418;
  --bg2:#0b3b3f;
  --surface:#0f1b21;
  --text:#e7ecef;
  --muted:#9aa4ad;
  --primary:#0ea5a2;
  --accent:#f59e0b;
  --ring:#e7ecef;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Nunito","Noto Sans SC",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  color:var(--text);
  background: radial-gradient(1200px 600px at 15% 5%, var(--bg2), transparent 60%),
              radial-gradient(1200px 600px at 85% 105%, var(--bg2), transparent 60%),
              var(--bg);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

.app{max-width:680px;margin:18px auto 32px;position:relative;padding-bottom:140px;width:100%}
.main{width:100%}

/* window bar */
.window-bar{height:36px;background:#2b2b2b;color:#fff;border-radius:14px 14px 0 0;display:flex;align-items:center;gap:8px;padding:0 10px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.15s ease, box-shadow 0.2s ease}
.window-bar .dot:hover{transform:scale(1.1)}
.window-bar .dot:focus{outline:2px solid rgba(255,255,255,0.6);outline-offset:2px}
.dot.red{background:#ff5f56}
.dot.yellow{background:#ffbd2e}
.dot.green{background:#27c93f}

/* header */
.header{display:grid;grid-template-columns:50px 1fr 90px;align-items:center;background:var(--surface);padding:14px 18px;border-radius:0 0 16px 16px;box-shadow:0 6px 0 #00000010}
.logo-badge{width:44px;height:44px;border-radius:14px;background:#e9f7ff;border:2px solid #d6eefc;display:flex;align-items:center;justify-content:center;font-size:22px}
.title{text-align:center;font-weight:800;letter-spacing:1.5px;font-size:15px}
.actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.icon-btn{border:none;background:transparent;padding:5px;border-radius:8px;cursor:pointer}
.icon-btn:hover{background:#f2f2f2}
.avatar{width:38px;height:38px;border-radius:12px;border:2px solid #fff;box-shadow:0 1px 0 #00000015}

/* intro */
.intro{padding:16px 18px}
.site-name{margin:8px 0 6px;font-size:24px}
.tagline{margin:0;color:var(--muted);position:relative;padding:8px 12px;border:2px dashed var(--ring);border-radius:12px;display:inline-block;background:linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));backdrop-filter:blur(2px);font-size:13px}
.tagline::before{content:"\201C";position:absolute;left:-8px;top:-8px;font-size:26px;color:var(--accent)}
.tagline::after{content:"\201D";position:absolute;right:-8px;bottom:-12px;font-size:26px;color:var(--accent)}
[data-theme="dark"] .tagline{color:var(--text);border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.08);box-shadow:0 2px 0 rgba(0,0,0,0.6);text-shadow:0 1px 0 rgba(0,0,0,0.6)}

/* search */
.search-wrap{padding:0 18px 8px}
.search{position:relative;display:flex;align-items:center;gap:8px;background:var(--surface);border:2px solid #0b0b0b;border-radius:16px;padding:12px 14px;box-shadow:0 5px 0 #000}
.search::after{content:"";position:absolute;top:auto;right:8px;bottom:-8px;left:8px;border:2px solid #000;border-top:0;border-radius:0 0 14px 14px}
.search-icon{opacity:.7}
.search input{flex:1;border:none;outline:none;font-size:13px;background:transparent}

/* tabs */
.tabs{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:2px solid rgba(0,0,0,0.1);margin-bottom:16px;background:var(--surface);border-radius:12px;box-shadow:0 2px 0 rgba(0,0,0,0.05)}
.tab{position:relative;background:transparent;border:none;font:inherit;padding:10px 16px;border-radius:10px;cursor:pointer;font-size:13px;color:var(--muted);transition:all 0.2s ease;font-weight:500}
.tab:hover{background:var(--bg2);color:var(--text)}
.tab.active{font-weight:700;color:var(--text);background:var(--bg2)}
.tab.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-14px;width:40px;height:4px;background:var(--accent);border-radius:4px 4px 0 0}
[data-theme="dark"] .tabs{border-bottom-color:rgba(255,255,255,0.1);box-shadow:0 2px 0 rgba(0,0,0,0.3)}
[data-theme="dark"] .tab:hover{background:rgba(255,255,255,0.05)}
[data-theme="dark"] .tab.active{background:rgba(255,255,255,0.08)}

/* cards */
.cards{display:grid;grid-template-columns:1fr;gap:16px;padding:0 18px 80px}
.card{position:relative;display:grid;grid-template-columns:90px 1fr;align-items:center;gap:14px;background:var(--surface);border:2px solid #0b0b0b;border-radius:16px;padding:12px 14px;box-shadow:0 6px 0 #000}
.card::after{content:"";position:absolute;left:8px;right:8px;bottom:-8px;height:0;border:2px solid #000;border-top:0;border-radius:0 0 14px 14px}
.thumb{width:80px;height:80px;border-radius:14px;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 0 #00000015}
.card-title{font-weight:800;letter-spacing:0.5px;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
.meta{color:var(--muted);font-size:11px;margin-top:4px}
.pill{justify-self:end;width:34px;height:34px;border-radius:50%;border:2px solid var(--ring);background:var(--ring);color:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease}
.pill:hover{background:var(--text);transform:scale(1.05)}
[data-theme="dark"] .pill{background:var(--ring);color:var(--surface)}
[data-theme="dark"] .pill:hover{background:var(--text);color:var(--surface)}

/* modern buttons used in forms */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:2px solid #000;border-radius:12px;background:#fff;color:#000;cursor:pointer;box-shadow:0 3px 0 #000;transition:transform .05s ease;font-size:13px}
.btn:active{transform:translateY(1px);box-shadow:0 2px 0 #000}
.btn-primary{background:linear-gradient(135deg,#00e0d3,#18b7b0);color:#000}
.btn-icon{width:18px;height:18px}

/* editor toolbar */
.editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.editor-toolbar .btn{padding:8px 10px;border-radius:10px}
.editor-box{min-height:220px;border:2px solid #000;border-radius:12px;padding:12px;background:#fff;margin-top:6px}
.editor-box:focus{outline:none;box-shadow:inset 0 0 0 2px #18b7b0}
.post-content img, .editor-box img{max-width:100%;height:auto;border-radius:12px}

/* download box */
.download-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border:2px solid #000;border-radius:14px;background:#fff;box-shadow:0 4px 0 #000}
.download-box .label{display:flex;align-items:center;gap:8px;font-weight:700}

/* pretty divider */
.divider{position:relative;height:12px;margin:18px 0}
.divider::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.25),transparent);border-radius:2px}
.divider::after{content:"";position:absolute;left:12px;right:12px;top:4px;height:4px;background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.12), transparent 70%);opacity:.6;border-radius:6px}

/* thin accent divider for header */
.divider--accent{position:relative;height:8px;margin:10px 0 10px}
.divider--accent::before{content:"";position:absolute;left:0;top:3px;width:120px;height:2px;background:#000;border-radius:2px}

/* light modal for editor inputs */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.25);display:none;align-items:center;justify-content:center;z-index:50}
.modal.show{display:flex}
.modal-card{background:var(--surface);border:2px solid var(--ring);border-radius:16px;box-shadow:0 8px 0 var(--ring);padding:18px;min-width:320px;max-width:90%;color:var(--text)}
.modal-card h3{margin:0 0 10px 0;color:var(--text)}
.modal-row{display:grid;gap:8px;margin-bottom:10px}
.modal-input{padding:12px;border:2px solid var(--ring);border-radius:12px;background:var(--surface);color:var(--text)}
.modal-input::placeholder{color:var(--muted)}

/* Input styling for gallery and video pages */
input[type="text"]::placeholder,
input[type="file"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
  color: var(--muted);
}

/* Image and video cards hover effect */
figure:hover,
div[onclick*="openImgModalIndex"]:hover,
div[onclick*="openVideoModalIndex"]:hover {
  box-shadow: 0 4px 0 var(--ring) !important;
}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
[data-theme="dark"] .modal{background:rgba(0,0,0,.7)}
[data-theme="dark"] .modal-card{background:var(--surface);border-color:var(--ring);box-shadow:0 8px 0 rgba(0,0,0,0.8)}

/* pager */
.pager{position:fixed;right:56px;bottom:160px;width:56px;height:56px;border-radius:50%;border:2px solid #000;background:#fff;box-shadow:0 6px 0 #000;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* dock */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:36px;width:min(680px,92%);background:var(--primary);border:2px solid #000;border-radius:16px;padding:14px 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;box-shadow:0 8px 0 #000}
.dock-btn{height:36px;border-radius:10px;border:2px solid #000;background:#16a6a0;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px}
.dock-btn.active{background:#109b95}

/* mini player */
.mini-player{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;width:min(680px,92%);display:flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--ring);border-radius:12px;box-shadow:0 5px 0 var(--ring);padding:6px 8px;z-index:40;color:var(--text)}
.mini-btn{border:2px solid var(--ring);border-radius:8px;background:var(--surface);padding:5px 8px;cursor:pointer;font-size:11px;color:var(--text)}
.mini-info{flex:1}
.mini-title{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.mini-progress{height:5px;background:var(--bg2);border:2px solid var(--ring);border-radius:6px;margin-top:3px}
.mini-bar{height:100%;width:0;background:linear-gradient(90deg,#00e0d3,#18b7b0);border-radius:5px}

/* toast notification */
.toast{position:fixed;top:20px;right:20px;background:var(--surface);border:2px solid var(--ring);border-radius:12px;padding:12px 16px;box-shadow:0 6px 0 var(--ring);z-index:9999;display:flex;align-items:center;gap:10px;min-width:280px;animation:toastSlideIn 0.3s ease-out;color:var(--text)}
.toast.success{background:linear-gradient(135deg,#d4edda,#c3e6cb);border-color:#28a745;color:#155724}
.toast.error{background:linear-gradient(135deg,#f8d7da,#f5c6cb);border-color:#dc3545;color:#721c24}
[data-theme="dark"] .toast.success{background:linear-gradient(135deg,#1e3a1e,#2d4a2d);border-color:#4ade80;color:#86efac}
[data-theme="dark"] .toast.error{background:linear-gradient(135deg,#3a1e1e,#4a2d2d);border-color:#f87171;color:#fca5a5}
.toast-icon{font-size:20px}
.toast-message{flex:1;font-weight:600;font-size:13px}
@keyframes toastSlideIn{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastSlideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(400px);opacity:0}}

/* responsive */
@media (max-width: 720px){
  .app{max-width:100%;margin:0 auto;padding:0 0 140px}
  .main{max-width:100%;margin:0 auto;padding:0 16px;width:100%}
  main.main[style*="padding"]{padding:0 16px !important}
  .window-bar{display:flex}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .dock{left:12px;right:12px;bottom:18px;width:calc(100% - 24px);transform:none}
  .mini-player{left:12px;right:12px;bottom:100px;width:calc(100% - 24px);transform:none}
  .toast{left:12px;right:12px;min-width:auto}
}

@media (max-width: 480px){
  .main{padding:0 12px}
  main.main[style*="padding"]{padding:0 12px !important}
  .dock{left:8px;right:8px;bottom:14px;width:calc(100% - 16px)}
  .mini-player{left:8px;right:8px;bottom:88px;width:calc(100% - 16px)}
  .toast{left:10px;right:10px}
  .btn,.pill,.dock-btn{min-height:44px}
}

/* focus & layout modes */
body.focus-mode{background:var(--surface);transition:background 0.3s ease}
body.focus-mode .app{max-width:640px;padding-bottom:80px}
body.focus-mode .header{box-shadow:none;background:var(--surface);border-radius:0 0 12px 12px}
body.focus-mode .header .actions{display:none}
body.focus-mode .intro,
body.focus-mode .tabs,
body.focus-mode .dock,
body.focus-mode #miniPlayer,
body.focus-mode #musicModal,
body.focus-mode .mini-player{display:none !important}
body.focus-mode .card{box-shadow:none;border-color:rgba(0,0,0,0.12)}
body.focus-mode .card::after{display:none}
body.focus-mode .modal{background:rgba(0,0,0,0.18)}

body.sticky-header .app{padding-top:70px !important}
body.sticky-header .header{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(680px,92%);z-index:90;box-shadow:0 10px 24px rgba(0,0,0,0.18);border-radius:16px;background:var(--surface);backdrop-filter:blur(8px)}
body.sticky-header .header::after{content:"";position:absolute;left:12px;right:12px;bottom:-6px;height:6px;background:rgba(0,0,0,0.12);border-radius:0 0 12px 12px;filter:blur(4px);opacity:0.6}
body.sticky-header .main .tabs{position:sticky;top:calc(18px + 72px);z-index:80;box-shadow:0 6px 20px rgba(0,0,0,0.12)}

/* utility panel */
#utilityPanel .modal-card{max-width:480px;width:100%}
.utility-list{display:grid;gap:12px}
.utility-tile{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:2px solid var(--ring);border-radius:14px;background:var(--surface);box-shadow:0 4px 0 var(--ring);cursor:pointer;transition:transform 0.1s ease, box-shadow 0.1s ease}
.utility-tile:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--ring)}
.utility-tile span{font-weight:700;color:var(--text)}
.utility-tile small{color:var(--muted)}
button.utility-tile{font:inherit;text-align:left}
button.utility-tile:focus{outline:2px solid var(--accent);outline-offset:2px}

body.utility-panel-open{overflow:hidden}

/* comment section */
.comment-empty-icon,
.comment-login-icon{width:56px;height:56px;border-radius:16px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:28px;border:2px solid var(--ring);box-shadow:0 4px 0 var(--ring)}
.comment-empty-icon{background:linear-gradient(135deg,var(--bg2),rgba(255,255,255,0.6))}
.comment-login-icon{background:linear-gradient(135deg,#ffe7cc,#ffd0a8)}
[data-theme="dark"] .comment-login-icon{background:linear-gradient(135deg,#4a2d1a,#402310)}
[data-theme="dark"] .comment-empty-icon{background:linear-gradient(135deg,rgba(14,165,160,0.35),rgba(14,165,160,0.15))}
.comment-cta{display:flex;gap:12px;flex-wrap:wrap}
.comment-cta .btn{flex:0 0 auto}
.comment-note{color:var(--muted);font-size:11px;margin-top:8px}