/* AUTO1111/WEBUI 風格靈感的深色主題 */
:root{
  --bg:#111318; /* 背景 */
  --panel:#1a1d24; /* 面板 */
  --panel-2:#20232b; /* 次面板 */
  --text:#e6e6e6; /* 文字 */
  --muted:#b5bdc5; /* 次要文字 */
  --primary:#5aa7ff; /* 主色 */
  --primary-2:#7ec4ff;
  --accent:#b07aff;
  --success:#3ddc97;
  --danger:#ff6b6b;
  --warning:#ffd166;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial}
img{max-width:100%;display:block}

.container{width:min(1200px,92%);margin:0 auto}
.header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.2) 80%,rgba(0,0,0,0));backdrop-filter:blur(6px)}
.header .container{display:flex;align-items:center;gap:16px;padding:12px 0}
.logo img{border-radius:12px;border:1px solid #2a2f3a;box-shadow:var(--shadow)}
.nav{margin-left:auto}
.nav-items{display:flex;align-items:center;gap:12px}
.nav-link{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:8px;background:var(--panel);border:1px solid #2b2f3a}
.nav-link:hover{background:var(--panel-2)}
.language-selector{position:relative}
.language-btn{display:flex;align-items:center;gap:8px;background:var(--panel);color:var(--text);border:1px solid #2b2f3a;padding:8px 12px;border-radius:8px;cursor:pointer}
.language-dropdown{display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid #2b2f3a;border-radius:10px;box-shadow:var(--shadow);min-width:180px;overflow:hidden}
.language-dropdown a{display:block;padding:10px 14px;color:var(--text);text-decoration:none}
.language-dropdown a:hover{background:var(--panel-2)}
.language-selector.open .language-dropdown{display:block}

.main .container{padding:24px 0 40px}
.hero{display:flex;flex-direction:column;gap:6px;padding:18px 18px;border-radius:16px;background:linear-gradient(180deg,var(--panel),#171a20);border:1px solid #2b2f3a;box-shadow:var(--shadow)}
.hero h1{margin:6px 0;font-size:28px}
.hero p{margin:0;color:var(--muted)}

.card{background:var(--panel);border:1px solid #2b2f3a;border-radius:16px;padding:18px;box-shadow:var(--shadow)}

.novels-section h2{margin:18px 6px}
.novels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.novel-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid #2b2f3a;border-radius:14px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.novel-card:hover{transform:translateY(-4px);box-shadow:0 8px 26px rgba(0,0,0,.35)}
.novel-thumb{aspect-ratio:3/4;background:#0d0f14;object-fit:cover}
.novel-meta{padding:10px 12px}
.novel-title{font-weight:700;margin:0 0 6px 0}
.novel-author{margin:0;color:var(--muted);font-size:13px}

.empty-state{display:grid;place-items:center;text-align:center;padding:40px;border:1px dashed #2b2f3a;border-radius:16px;color:var(--muted)}
.empty-state i{font-size:42px;margin-bottom:12px;color:var(--primary)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #2b2f3a;background:var(--panel-2);color:var(--text);cursor:pointer;text-decoration:none}
.btn:hover{background:#2a2f3a}
.btn.btn-primary{background:linear-gradient(180deg,var(--primary),var(--accent));border:0;color:#0b1020}
.btn.small{padding:6px 10px;border-radius:8px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid #2b2f3a;background:var(--panel-2);color:var(--text);cursor:pointer}

.form{display:grid;gap:14px}
.form .form-group{display:flex;flex-direction:column;gap:8px}
.form input[type="text"],.form input[type="url"],.form input[type="file"]{background:#0f1218;color:var(--text);border:1px solid #2b2f3a;border-radius:10px;padding:10px}
.form small{color:var(--muted)}
.form-actions{display:flex;gap:10px}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#2a2f3a;border:1px solid #2b2f3a}
.cover-preview{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.cover-preview img{width:120px;height:auto;border-radius:10px;border:1px solid #2b2f3a}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips .chip{padding:6px 10px;background:#151922;border:1px solid #2b2f3a;border-radius:999px;color:var(--muted)}

.novel-info .novel-header{display:flex;gap:16px;align-items:flex-start}
.novel-cover{width:140px;height:186px;object-fit:cover;border-radius:10px;border:1px solid #2b2f3a;background:#0d0f14}
.novel-info .meta h1{margin:0 0 6px 0}
.novel-info .meta p{margin:0 0 6px 0;color:var(--muted)}

.chapters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.chapters li{padding:10px 12px;border-radius:10px;background:#161a22;border:1px solid #2b2f3a;display:flex;align-items:center;justify-content:space-between}
.chapters li button{margin-left:10px}

.modal{position:fixed;inset:0;display:none;flex-direction:column;background:rgba(0,0,0,.8);backdrop-filter:blur(2px);z-index:9999}
.modal.open{display:flex}
.modal-toolbar{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-bottom:1px solid #2b2f3a;padding:8px 12px;gap:10px}
.modal-toolbar .left-tools, .modal-toolbar .center-tools, .modal-toolbar .right-tools{display:flex;align-items:center;gap:8px}
.modal-toolbar .center-tools{flex:1;justify-content:center;gap:12px}
.font-controls{display:flex;align-items:center;gap:6px}
.font-size-display{min-width:24px;text-align:center;color:var(--muted);font-size:12px}
.layout-controls{display:flex;align-items:center;gap:6px}
.modal-content{flex:1;overflow:auto;padding:4vh 8% 4vh 8%;background:var(--bg);transition:padding .15s ease}
.modal-content.wide{padding:4vh 15% 4vh 15%}
.modal-content.narrow{padding:4vh 5% 4vh 5%}
.modal-content article{max-width:100%;line-height:1.8;font-size:18px;white-space:pre-wrap;transition:all .15s ease}
.modal-content article.loose{line-height:2.2}
.modal-content article.tight{line-height:1.6}
.modal-footer{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-top:1px solid #2b2f3a;padding:10px 16px}
.chapter-info{flex:1;text-align:center;color:var(--muted);font-size:14px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 改進的Dropdown */
.dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--panel);border:1px solid #2b2f3a;border-radius:10px;box-shadow:var(--shadow);min-width:120px;overflow:hidden;z-index:10}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu.bg-menu, .dropdown-menu.text-menu{padding:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dropdown-menu .icon-btn{width:28px;height:28px;border-radius:6px;border:1px solid transparent}
.dropdown-menu .icon-btn:hover{border-color:var(--primary)}
.dropdown-menu .icon-btn.active{border-color:var(--primary);box-shadow:0 0 0 2px rgba(90,167,255,.3)}

.footer{padding:18px 0;border-top:1px solid #2b2f3a;color:var(--muted)}

/* RWD */
@media (max-width: 768px){
  .novel-info .novel-header{flex-direction:column;align-items:center;text-align:center}
  .form-actions{flex-direction:column}
  .nav-items{gap:8px}
  .language-dropdown{min-width:160px}
  .theme-toggle{display:flex;gap:8px}
  .theme-toggle .btn{min-width:72px}
}