:root { --ink:#161616; --paper:#f4f3ef; --panel:#fff; --line:#deded8; --muted:#777; --accent:#b9f8ed; --danger:#b83c3c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea,select { font:inherit; }
button,a { color:inherit; }
a { text-decoration:none; }
button { cursor:pointer; }
[hidden] { display:none!important; }
.eyebrow { margin:0 0 9px; color:#8c8c86; font-size:9px; letter-spacing:.18em; }
.login-view { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 75% 15%,#373258,#151515 47%); }
.login-card { width:min(460px,100%); padding:48px; color:#fff; background:#111; box-shadow:0 35px 100px #0007; }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:75px; }
.login-brand strong { font-size:29px; letter-spacing:-.08em; }
.login-brand span { color:#888; font-size:8px; line-height:1.1; letter-spacing:.12em; }
.login-card h1 { margin:0 0 12px; font-size:38px; font-weight:400; letter-spacing:-.04em; }
.login-card>div>p:last-child { margin:0 0 44px; color:#888; font-size:13px; }
.login-card label { display:block; margin-bottom:24px; }
.login-card label span { display:block; margin-bottom:9px; color:#888; font-size:10px; }
.login-card input { width:100%; border:0; border-bottom:1px solid #444; outline:0; padding:12px 0; color:#fff; background:transparent; }
.login-card input:focus { border-color:var(--accent); }
.login-card>button { width:100%; margin-top:8px; padding:15px 18px; border:0; border-radius:999px; color:#111; background:var(--accent); text-align:left; }
.login-card>button span { float:right; }
.form-message { min-height:18px; color:#ff8e8e; font-size:11px; }
.back-link { display:block; margin-top:28px; color:#777; font-size:11px; text-align:center; }
.admin-shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:32px 24px 24px; color:#fff; background:#151515; }
.sidebar-brand { display:flex; align-items:center; justify-content:space-between; padding:0 10px 47px; }
.sidebar-brand strong { font-size:27px; letter-spacing:-.08em; }
.sidebar-brand span { color:#666; font-size:9px; letter-spacing:.16em; }
.sidebar nav { display:grid; gap:5px; }
.sidebar nav button { width:100%; border:0; padding:13px 12px; color:#999; background:transparent; text-align:left; font-size:12px; transition:.25s; }
.sidebar nav button span { display:inline-block; width:34px; color:#555; font-size:8px; }
.sidebar nav button:hover,.sidebar nav button.active { color:#fff; background:#242424; }
.sidebar-foot { display:flex; justify-content:space-between; margin-top:auto; padding:20px 10px 0; border-top:1px solid #333; }
.sidebar-foot a,.sidebar-foot button { border:0; color:#777; background:transparent; font-size:10px; }
.admin-main { min-width:0; }
.admin-header { min-height:138px; display:flex; justify-content:space-between; align-items:center; gap:30px; padding:32px clamp(25px,4vw,64px); border-bottom:1px solid var(--line); }
.admin-header h1 { margin:0; font-size:32px; font-weight:400; letter-spacing:-.04em; }
.admin-user { display:flex; align-items:center; gap:12px; color:#777; font-size:11px; }
.admin-user i { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#bbb2ff,var(--accent)); }
.sidebar-toggle { display:none; border:0; background:transparent; font-size:20px; }
.admin-content { padding:42px clamp(25px,4vw,64px) 70px; }
.loading { padding:70px 0; color:#888; text-align:center; }
.overview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.metric { min-height:180px; display:flex; flex-direction:column; justify-content:space-between; padding:26px; background:var(--panel); }
.metric span { color:#888; font-size:10px; letter-spacing:.08em; }
.metric strong { font-size:62px; line-height:.8; font-weight:300; letter-spacing:-.06em; }
.metric small { color:#aaa; font-size:9px; }
.welcome-panel { display:grid; grid-template-columns:1.2fr .8fr; min-height:250px; margin-top:16px; background:#1a1a1a; color:#fff; }
.welcome-panel>div { display:flex; flex-direction:column; justify-content:space-between; padding:38px; }
.welcome-panel h2 { margin:0; max-width:550px; font-size:clamp(32px,4vw,55px); line-height:1; font-weight:300; letter-spacing:-.05em; }
.welcome-panel p { margin:0; color:#888; font-size:12px; }
.welcome-visual { position:relative; overflow:hidden; background:radial-gradient(circle at 48% 45%,#b9f8ed,#535b86 24%,#17171d 67%); }
.welcome-visual::after { content:"FFIM"; position:absolute; right:25px; bottom:20px; color:#ffffff55; font-size:55px; font-weight:700; letter-spacing:-.08em; }
.content-toolbar { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-bottom:24px; }
.content-toolbar p { margin:0; color:#777; font-size:12px; }
.primary-button { border:0; border-radius:999px; padding:12px 19px; color:#111; background:var(--accent); font-size:11px; }
.content-table { width:100%; border-collapse:collapse; background:#fff; }
.content-table th { padding:15px 18px; color:#999; background:#ebebe7; font-size:9px; font-weight:400; text-align:left; letter-spacing:.08em; }
.content-table td { padding:18px; border-bottom:1px solid #ecece8; font-size:12px; vertical-align:middle; }
.content-table tbody tr:hover { background:#fafaf7; }
.table-title { display:flex; align-items:center; gap:13px; min-width:220px; }
.table-thumb { flex:0 0 auto; width:58px; height:44px; object-fit:cover; background:#ddd; }
.media-video-badge { display:grid; place-items:center; color:#fff; background:#222; font-size:8px; letter-spacing:.12em; }
.table-title strong { display:block; max-width:320px; font-size:12px; font-weight:500; line-height:1.4; }
.table-title small { display:block; margin-top:4px; color:#999; font-size:9px; }
.status-pill { display:inline-block; padding:5px 9px; border-radius:999px; color:#30705d; background:#daf4eb; font-size:9px; }
.status-pill.draft { color:#777; background:#eee; }
.row-actions { white-space:nowrap; }
.row-actions button { border:0; padding:6px 8px; color:#666; background:transparent; font-size:10px; }
.row-actions .delete { color:#b55; }
.empty-state { padding:75px 25px; color:#888; background:#fff; text-align:center; }
.business-feature-panel { display:grid; grid-template-columns:230px 1fr; gap:28px; align-items:center; margin-bottom:28px; padding:22px; background:#fff; }
.business-feature-preview { display:grid; place-items:center; height:250px; overflow:hidden; color:#999; background:#ecece8; font-size:12px; text-align:center; }
.business-feature-preview img { width:100%; height:100%; object-fit:cover; }
.business-feature-panel h2 { margin:0 0 10px; font-size:24px; font-weight:400; }
.business-feature-panel form>p:not(.eyebrow) { max-width:480px; margin:0 0 24px; color:#777; font-size:12px; line-height:1.7; }
.business-feature-panel label { display:block; margin-bottom:18px; }
.business-feature-panel label span { display:block; margin-bottom:8px; color:#777; font-size:10px; }
.business-feature-panel input[type="file"] { width:100%; border:1px solid #d9d9d3; padding:10px; background:#fff; }
.settings-form { max-width:940px; padding:35px; background:#fff; }
.settings-section { display:grid; grid-template-columns:180px 1fr; gap:35px; padding:28px 0; border-bottom:1px solid var(--line); }
.settings-section:first-child { padding-top:0; }
.settings-section h3 { margin:0; font-size:14px; font-weight:500; }
.settings-section>div { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.settings-section label.wide { grid-column:1/-1; }
.settings-form label span,.editor-fields label span { display:block; margin-bottom:8px; color:#777; font-size:9px; }
.settings-form input,.settings-form textarea,.editor-fields input,.editor-fields textarea,.editor-fields select { width:100%; border:1px solid #d9d9d3; outline:0; padding:11px 12px; color:#222; background:#fff; }
.settings-form input:focus,.settings-form textarea:focus,.editor-fields input:focus,.editor-fields textarea:focus,.editor-fields select:focus { border-color:#777; }
.settings-actions { display:flex; justify-content:flex-end; padding-top:25px; }
.inquiry-card { display:grid; grid-template-columns:150px 1fr 180px; gap:28px; padding:25px; border-bottom:1px solid var(--line); background:#fff; }
.inquiry-card time { color:#999; font-size:10px; }
.inquiry-card h3 { margin:0 0 8px; font-size:15px; font-weight:500; }
.inquiry-card p { margin:5px 0; color:#666; font-size:12px; line-height:1.7; white-space:pre-wrap; }
.inquiry-card aside { display:grid; align-content:start; gap:8px; }
.inquiry-card select { width:100%; border:1px solid #ddd; padding:8px; background:#fff; font-size:10px; }
.editor-dialog { width:min(760px,calc(100vw - 30px)); max-height:90vh; padding:0; border:0; background:#f5f4f0; box-shadow:0 35px 100px #0008; }
.editor-dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
.editor-dialog form>header { display:flex; justify-content:space-between; padding:28px 32px; border-bottom:1px solid var(--line); background:#fff; }
.editor-dialog h2 { margin:0; font-size:25px; font-weight:400; }
.dialog-close { width:38px; height:38px; border:0; border-radius:50%; background:#eee; font-size:22px; }
.editor-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:32px; overflow:auto; }
.editor-fields label.wide { grid-column:1/-1; }
.editor-fields textarea { min-height:100px; resize:vertical; }
.editor-fields .checkbox { display:flex; align-items:center; gap:9px; }
.editor-fields .checkbox input { width:auto; }
.project-image-manager { grid-column:1/-1; padding:18px; border:1px solid #d9d9d3; background:#fff; }
.project-image-manager>span { display:block; margin-bottom:14px; color:#777; font-size:9px; }
.project-image-list { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:15px; }
.project-image-list figure { position:relative; margin:0; background:#eee; }
.project-image-list img,.project-image-list video { display:block; width:100%; aspect-ratio:1.25/1; object-fit:cover; background:#111; }
.project-image-list button { position:absolute; right:6px; top:6px; width:25px; height:25px; border:0; border-radius:50%; color:#fff; background:#000b; }
.project-image-list figcaption { padding:7px; color:#777; font-size:9px; }
.project-image-upload { display:block; margin:0!important; }
.project-image-upload input { margin-top:5px; }
.project-image-manager>small { display:block; margin-top:12px; color:#999; font-size:9px; line-height:1.6; }
.editor-dialog form>footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 32px; border-top:1px solid var(--line); background:#fff; }
.editor-dialog footer p { margin:0; color:#b55; font-size:11px; }
.editor-dialog footer button { border:0; border-radius:999px; padding:11px 18px; font-size:11px; }
.cancel-button { background:#eee; }
.save-button { color:#111; background:var(--accent); }
.toast { position:fixed; right:24px; bottom:24px; z-index:100; max-width:340px; padding:14px 18px; color:#fff; background:#151515; font-size:11px; opacity:0; transform:translateY(15px); pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:none; }
@media (max-width:900px) {
  .admin-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:20; width:250px; left:0; transform:translateX(-100%); transition:.3s; }
  .sidebar.open { transform:none; box-shadow:20px 0 60px #0005; }
  .sidebar-toggle { display:block; }
  .admin-header { justify-content:flex-start; min-height:110px; }
  .admin-user { margin-left:auto; }
  .overview-grid { grid-template-columns:repeat(2,1fr); }
  .content-table { min-width:760px; }
  .table-wrap { overflow:auto; }
  .settings-section { grid-template-columns:1fr; }
  .inquiry-card { grid-template-columns:110px 1fr; }
  .inquiry-card aside { grid-column:2; }
}
@media (max-width:580px) {
  .business-feature-panel { grid-template-columns:1fr; }
  .business-feature-preview { height:230px; }
  .login-card { padding:32px 24px; }
  .overview-grid { grid-template-columns:1fr; }
  .metric { min-height:140px; }
  .welcome-panel { grid-template-columns:1fr; }
  .welcome-visual { min-height:170px; }
  .settings-form { padding:22px; }
  .settings-section>div,.editor-fields { grid-template-columns:1fr; }
  .project-image-list { grid-template-columns:repeat(2,1fr); }
  .settings-section label.wide,.editor-fields label.wide { grid-column:auto; }
  .inquiry-card { grid-template-columns:1fr; }
  .inquiry-card aside { grid-column:auto; }
  .editor-dialog form>footer { align-items:flex-start; flex-direction:column; }
}