*{box-sizing:border-box;margin:0;padding:0}
body{background:#f5f0e6;font-family:'Noto Sans SC',-apple-system,sans-serif;color:#2b2a26;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:#b54a36;text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:14px}

/* Layout */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#f5f0e6;border-right:1px solid #e3dccc;padding:24px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.sidebar-logo{display:flex;align-items:center;gap:10px;margin-bottom:32px}
.sidebar-logo .icon{width:36px;height:36px;background:#b54a36;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Noto Serif SC',serif;font-size:18px;font-weight:600;transform:rotate(-3deg)}
.sidebar-logo span{font-family:'Noto Serif SC',serif;font-size:16px;font-weight:500}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-item{padding:10px 14px;border-radius:8px;font-size:14px;color:#4a4842;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .15s}
.nav-item:hover{background:#ebe3d2}
.nav-item.active{background:#b54a36;color:#fff}
.nav-item .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4}
.nav-item.active .dot{opacity:1}
.sidebar-footer{border-top:1px solid #e3dccc;padding-top:16px;margin-top:auto}
.sidebar-footer .nav-item{font-size:13px;color:#86807a}

.main{background:#fffdf8;padding:28px 32px;min-height:100vh}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.page-title{font-family:'Noto Serif SC',serif;font-size:24px;font-weight:500}
.page-subtitle{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#86807a;letter-spacing:.1em;margin-top:4px}

/* Cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:#f5f0e6;border-radius:12px;padding:18px}
.stat-card .label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#86807a;letter-spacing:.1em}
.stat-card .value{font-family:'Noto Serif SC',serif;font-size:30px;font-weight:500;margin-top:6px}
.stat-card .sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#86807a;margin-top:4px}
.stat-card.accent{background:#f2dcd5}
.stat-card.accent .value{color:#b54a36}

/* Table */
.table-wrap{background:#fff;border:1px solid #e3dccc;border-radius:12px;overflow:hidden}
.table-header{display:grid;gap:12px;padding:12px 16px;background:#f5f0e6;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#86807a;text-transform:uppercase}
.table-row{display:grid;gap:12px;padding:14px 16px;border-bottom:1px solid #efeadd;align-items:center;font-size:13px;transition:background .1s}
.table-row:hover{background:#faf7ee}
.table-row:last-child{border-bottom:none}

/* Tags */
.tag{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:3px 10px;border-radius:20px;display:inline-block;width:fit-content}
.tag.completed{background:#dde4d5;color:#5a7050}
.tag.in_progress{background:#f2dcd5;color:#b54a36}
.tag.generating{background:#efe1d2;color:#6b4429}
.tag.not_started{background:#ece6da;color:#86807a}
.tag.failed{background:#f5d5d5;color:#c44040}

/* Avatar */
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif SC',serif;font-size:14px;flex-shrink:0}

/* Buttons */
.btn{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:500;border:none;transition:all .15s}
.btn-primary{background:#b54a36;color:#fff;box-shadow:0 4px 12px -4px rgba(181,74,54,.4)}
.btn-primary:hover{background:#9e3f2e}
.btn-outline{background:#fffdf8;color:#2b2a26;border:1.5px solid #e3dccc}
.btn-outline:hover{border-color:#b54a36;color:#b54a36}
.btn-sm{padding:6px 12px;font-size:12px}

/* Forms */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:#4a4842}
.form-input{width:100%;padding:10px 14px;border:1px solid #e3dccc;border-radius:10px;background:#fffdf8;font-size:14px;transition:border-color .15s;outline:none}
.form-input:focus{border-color:#b54a36}
textarea.form-input{min-height:120px;resize:vertical;line-height:1.6}
.form-hint{font-size:11px;color:#86807a;margin-top:4px}

/* Tabs */
.tabs{display:flex;gap:0;border-bottom:1px solid #e3dccc;margin-bottom:24px}
.tab{padding:10px 20px;font-size:13px;color:#86807a;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}
.tab:hover{color:#2b2a26}
.tab.active{color:#b54a36;border-bottom-color:#b54a36;font-weight:500}

/* Card */
.card{background:#fffdf8;border:1px solid #e3dccc;border-radius:14px;padding:20px;margin-bottom:16px}
.card-title{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:#b54a36;margin-bottom:10px;font-weight:500}

/* Login page */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f5f0e6}
.login-box{width:400px;background:#fffdf8;border:1px solid #e3dccc;border-radius:16px;padding:40px;box-shadow:0 20px 60px -20px rgba(80,55,30,.2)}
.login-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:32px}
.login-logo .icon{width:64px;height:64px;background:#b54a36;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Noto Serif SC',serif;font-size:26px;font-weight:600;transform:rotate(-4deg);margin-bottom:16px;position:relative}
.login-logo .icon::after{content:'';position:absolute;inset:4px;border:1.5px solid rgba(255,255,255,.35);border-radius:5px}
.login-logo h2{font-family:'Noto Serif SC',serif;font-size:22px;font-weight:500}
.login-logo p{font-size:13px;color:#86807a;margin-top:4px}
.login-error{background:#f5d5d5;color:#c44040;font-size:13px;padding:10px 14px;border-radius:8px;margin-bottom:16px}

/* Progress bar */
.progress-bar{height:6px;background:#ebe3d2;border-radius:3px;overflow:hidden}
.progress-bar .fill{height:100%;border-radius:3px;transition:width .3s}

/* Detail content */
.story-content{font-family:'Noto Serif SC',serif;font-size:15px;line-height:2;color:#2b2a26}
.meta-line{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#86807a;letter-spacing:.08em;margin-top:12px}

/* Search & Filter bar */
.toolbar{display:flex;gap:10px;align-items:center}
.search-input{padding:8px 14px;border:1px solid #e3dccc;border-radius:8px;background:#f5f0e6;font-size:13px;width:220px;outline:none}
.search-input:focus{border-color:#b54a36}
.filter-select{padding:8px 12px;border:1px solid #e3dccc;border-radius:8px;background:#f5f0e6;font-size:13px;outline:none}

/* Responsive */
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{display:none}}

/* Prompt editor */
.prompt-card{background:#fffdf8;border:1px solid #e3dccc;border-radius:14px;padding:20px;margin-bottom:16px}
.prompt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.prompt-type{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:#b54a36;font-weight:500}
.prompt-version{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#86807a}

/* Toast */
.toast{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:10px;font-size:14px;z-index:9999;animation:slideIn .3s ease}
.toast.success{background:#dde4d5;color:#3a5a30}
.toast.error{background:#f5d5d5;color:#c44040}
@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}