:root{color-scheme:dark;--ink:#10110f;--panel:#1d211c;--line:#363b32;--muted:#9a9f91;--paper:#f0ede4;--lime:#d7f35f;--orange:#f5a26b;--radius:10px}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--ink);color:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}button,textarea,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.52}.app-shell{min-height:100vh}.topbar{height:76px;display:flex;align-items:center;gap:38px;padding:0 5.5vw;border-bottom:1px solid var(--line);background:rgba(16,17,15,.96);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:11px;color:var(--paper);text-decoration:none;min-width:160px}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--lime);color:var(--lime);border-radius:50%}.brand strong,.brand em{display:block;font-style:normal}.brand strong{font-size:16px;letter-spacing:.13em}.brand em{font-size:8px;letter-spacing:.2em;color:var(--muted);margin-top:3px}.top-nav{display:flex;align-items:center;gap:22px;flex:1;overflow:auto}.nav-link{border:0;background:transparent;color:var(--muted);padding:28px 0 25px;font-size:12px;position:relative;white-space:nowrap}.nav-link:hover,.nav-link.active{color:var(--paper)}.nav-link.active:after{content:"";height:2px;background:var(--lime);position:absolute;left:0;right:0;bottom:0}.top-actions{display:flex;gap:10px;align-items:center}.status-pill{font-size:10px;padding:7px 10px;border:1px solid #6c6c45;border-radius:30px;color:#c9cb87;white-space:nowrap}.status-pill.online{border-color:#708a42;color:var(--lime)}.status-pill.offline{color:var(--orange);border-color:#83533d}.round-button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted)}.round-button:hover{color:var(--paper);border-color:var(--lime)}.main-content{max-width:1500px;margin:0 auto;padding:0 5.5vw 80px}.hero-line{display:flex;justify-content:space-between;align-items:flex-end;padding:58px 0 32px;border-bottom:1px solid var(--line)}.eyebrow{margin:0 0 11px;color:var(--lime);font-size:10px;letter-spacing:.16em;font-weight:700}.hero-line h1{font-size:clamp(28px,4vw,52px);font-weight:500;letter-spacing:-.035em;margin:0}.hero-caption{color:var(--muted);font-size:12px;max-width:180px;line-height:1.6;margin:0}.mobile-nav{display:none}.studio-grid,.single-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:18px;margin-top:22px}.composer-panel,.preview-panel,.library-panel,.settings-panel,.analysis-panel,.chat-panel{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius)}.composer-panel,.preview-panel,.library-panel,.settings-panel,.analysis-panel,.chat-panel{padding:25px}.preview-panel{min-height:635px}.panel-kicker{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:10px;letter-spacing:.13em}.panel-note{letter-spacing:0;color:#7e8478}.composer-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 23px}.composer-head h2,.section-head h2,.settings-intro h2,.chat-intro h2{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:0}.ghost-button,.secondary-button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:8px 11px;font-size:11px;border-radius:5px}.ghost-button:hover,.secondary-button:hover{border-color:var(--lime);color:var(--paper)}.mode-chip{color:var(--lime);border:1px solid #5f753d;padding:6px 9px;border-radius:20px;font-size:10px}.provider-switch{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px;color:var(--muted);font-size:11px}.provider-switch>div{display:flex;gap:4px}.provider-choice{border:1px solid var(--line);background:#161a15;color:var(--muted);border-radius:5px;padding:8px 10px;min-width:102px;text-align:left}.provider-choice span,.provider-choice small{display:block}.provider-choice span{font-size:11px}.provider-choice small{font-size:9px;color:#70766c;margin-top:3px}.provider-choice.active{border-color:var(--lime);color:var(--paper);background:#252b1e}.provider-choice.active small{color:var(--lime)}.prompt-box{width:100%;height:198px;resize:vertical;min-height:120px;background:#121410;color:var(--paper);border:1px solid var(--line);border-radius:7px;padding:17px;line-height:1.7;outline:none;font-size:14px}.prompt-box.compact{height:145px}.prompt-box:focus,.chat-form textarea:focus{border-color:#8ba04d;box-shadow:0 0 0 3px #d7f35f12}.prompt-box::placeholder,.chat-form textarea::placeholder{color:#686e64}.prompt-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px}.suggestions{display:flex;gap:6px;overflow-x:auto}.suggestions button{white-space:nowrap;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:20px;padding:7px 10px;font-size:10px}.suggestions button:hover{color:var(--paper);border-color:#8ba04d}.upload-inline{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:10px;white-space:nowrap;cursor:pointer}.upload-inline:hover{color:var(--lime)}.icon{display:inline-block;font-size:14px;line-height:1}.reference-preview{min-height:22px;display:flex;justify-content:space-between;align-items:center;color:#9fac75;font-size:10px}.reference-preview button{border:0;background:transparent;color:var(--orange)}.control-bar{display:grid;grid-template-columns:1.25fr .8fr .95fr .9fr .7fr;gap:8px;margin-top:21px}.control-bar label,.advanced-grid label,.inline-fields label,.upscale-options label,.field-line,.two-col-fields label{display:grid;gap:6px;color:var(--muted);font-size:10px}.control-bar select,.control-bar input,.advanced-grid select,.advanced-grid input,.inline-fields select,.inline-fields input,.upscale-options select,.field-line input,.two-col-fields input,.two-col-fields select{width:100%;min-width:0;background:#121410;border:1px solid var(--line);border-radius:5px;color:var(--paper);padding:9px 8px;outline:none;font-size:11px}.control-bar output{display:block;color:var(--lime);font-size:10px;margin-top:-23px;margin-left:auto;padding-right:8px}.advanced{margin-top:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}.advanced summary{color:var(--paper);font-size:11px;cursor:pointer;list-style:none}.advanced summary::-webkit-details-marker{display:none}.advanced summary:after{content:"+";float:right;color:var(--lime);font-size:16px}.advanced[open] summary:after{content:"−"}.advanced summary span{color:var(--muted);margin-left:8px;font-size:10px}.advanced-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}.advanced-grid small{font-size:9px;color:#666d62}.form-submit{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:21px}.fine-print{color:#73796e;font-size:10px;line-height:1.5}.primary-button{border:0;background:var(--lime);color:#15180f;border-radius:5px;padding:12px 16px;font-size:12px;font-weight:750;white-space:nowrap}.primary-button:hover{background:#edff90}.primary-button kbd{margin-left:10px;border-left:1px solid #78873f;padding-left:9px;font-size:9px;font-weight:500}.empty-preview,.loading-state{min-height:550px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:9px;color:var(--muted)}.empty-preview strong,.loading-state strong{color:var(--paper);font-size:14px}.empty-preview span,.loading-state span{font-size:11px;max-width:260px;line-height:1.6}.empty-symbol{width:58px;height:58px;border:1px solid #65763d;color:var(--lime);border-radius:50%;display:grid;place-items:center;font-size:25px;margin-bottom:7px}.loader{width:30px;height:30px;border:2px solid #465035;border-top-color:var(--lime);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:10px}@keyframes spin{to{transform:rotate(360deg)}}.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:25px}.result-card{border:1px solid var(--line);background:#11130f;border-radius:6px;overflow:hidden}.image-frame{aspect-ratio:1/1;background:#0a0b09;display:grid;place-items:center;overflow:hidden}.image-frame img{width:100%;height:100%;object-fit:contain;display:block}.result-actions{display:flex;justify-content:space-between;padding:9px}.result-actions button{border:0;background:transparent;color:var(--muted);font-size:10px;padding:3px}.result-actions button:hover{color:var(--lime)}.inspiration-section{padding-top:58px}.compact-section{padding-top:38px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}.section-head>span{font-size:11px;color:var(--muted)}.inspiration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.inspiration-card{border:0;padding:0;text-align:left;background:#171a15;overflow:hidden;color:var(--paper);border-radius:7px}.inspiration-card img{display:block;width:100%;aspect-ratio:1.25/1;object-fit:cover;opacity:.78;transition:opacity .2s,transform .2s}.inspiration-card span{display:block;padding:11px 12px;font-size:11px}.inspiration-card:hover img{opacity:1;transform:scale(1.03)}.upload-block{min-height:168px;border:1px dashed #596048;background:#141711;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;text-align:center;color:var(--muted);cursor:pointer;padding:18px}.upload-block:hover,.upload-block.has-file{border-color:var(--lime);background:#1b2117}.upload-block strong{font-size:13px;color:var(--paper);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-block small{font-size:10px}.upload-icon{color:var(--lime);font-size:24px}.inline-fields,.upscale-options,.two-col-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.field-line{margin-top:13px}.library-panel,.settings-panel{margin-top:22px}.library-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.library-card{border:1px solid var(--line);background:#171a15;border-radius:7px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:13px;padding:10px;position:relative}.library-image{aspect-ratio:1/1;background:#0f110e;border-radius:5px;overflow:hidden;display:grid;place-items:center;color:var(--lime)}.library-image img{width:100%;height:100%;object-fit:cover}.library-copy{min-width:0}.library-copy>div{display:flex;align-items:center;gap:8px}.tag{font-size:9px;border:1px solid #627842;color:var(--lime);padding:3px 6px;border-radius:20px}.library-copy time,.library-copy small{color:var(--muted);font-size:9px}.library-copy p{font-size:11px;line-height:1.55;margin:11px 0 7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.library-actions{position:absolute;right:10px;bottom:10px;display:flex;gap:7px}.library-actions button{border:0;background:transparent;color:var(--muted);font-size:10px}.library-actions button:hover{color:var(--lime)}.clear-history{margin-top:18px;color:var(--orange)}.empty-library{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);text-align:center}.empty-library strong{color:var(--paper)}.empty-library span{font-size:11px}.settings-panel{max-width:850px}.settings-intro{padding:30px 0 24px;border-bottom:1px solid var(--line)}.settings-intro p,.chat-intro p:last-child{color:var(--muted);font-size:12px;line-height:1.7;max-width:520px;margin:10px 0 0}.provider-status-list{border-bottom:1px solid var(--line)}.provider-status{display:flex;justify-content:space-between;align-items:center;padding:19px 0;border-bottom:1px solid var(--line)}.provider-status:last-child{border-bottom:0}.provider-status strong,.provider-status span{display:block}.provider-status strong{font-size:13px}.provider-status span{font-size:10px;color:var(--muted);margin-top:6px}.provider-status b{font-size:10px;font-weight:500;border:1px solid #6c6c45;border-radius:20px;padding:5px 8px;color:var(--orange)}.provider-status b.online{color:var(--lime);border-color:#65763d}.env-note{background:#282c20;border-radius:6px;padding:17px;margin-top:23px}.env-note p{color:#adb3a2;font-size:11px;line-height:1.7;margin:8px 0 14px}.env-note code{color:var(--lime)}.template-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.template-strip span{border:1px solid var(--line);border-radius:6px;padding:15px 12px;color:var(--muted);font-size:11px;background:var(--panel)}.analysis-panel{min-height:520px}.analysis-output{min-height:420px}.analysis-copy{margin-top:22px;border:1px solid var(--line);background:#121410;border-radius:7px;padding:18px}.analysis-copy p{font-size:12px;line-height:1.8;color:#d8d5cc}.decoder-options{display:flex;flex-wrap:wrap;gap:14px;margin-top:15px;color:var(--muted);font-size:11px}.decoder-options input{accent-color:var(--lime)}.chat-panel{margin-top:22px}.chat-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:29px 0 20px;border-bottom:1px solid var(--line)}.chat-intro h2{font-size:24px}.chat-messages{max-width:820px;margin:0 auto;padding:24px 0;min-height:300px}.chat-empty{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:12px;justify-content:center;padding:100px 0 80px}.chat-empty button{border:1px solid var(--line);background:transparent;color:var(--paper);border-radius:20px;padding:7px 10px;font-size:10px}.chat-message{max-width:78%;margin:0 0 14px;padding:12px 14px;border-radius:7px;background:#262b22}.chat-message.user{margin-left:auto;background:var(--lime);color:#14170f}.chat-message span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.65}.chat-message p{font-size:12px;line-height:1.7;margin:5px 0 0;white-space:pre-wrap}.chat-form{max-width:820px;margin:0 auto;display:flex;gap:10px;align-items:flex-end}.chat-form textarea{flex:1;min-height:76px;resize:vertical;background:#121410;border:1px solid var(--line);border-radius:7px;color:var(--paper);padding:14px;font-size:12px;line-height:1.6;outline:none}.chat-form .primary-button{height:44px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:var(--paper);color:#1b2114;border-radius:5px;padding:10px 14px;max-width:min(520px,calc(100vw - 26px));font-size:11px;transition:.2s;z-index:10}.toast.is-visible{opacity:1;transform:translate(-50%,0)}.toast.error{background:#ffd8c9;color:#532319}.toast.warning{background:#f6e7b6;color:#4e3b12}@media(max-width:980px){.topbar{padding:0 22px;gap:20px}.top-nav{gap:16px}.main-content{padding:0 22px 64px}.hero-line{padding-top:40px}.studio-grid,.single-grid{grid-template-columns:1fr}.preview-panel{min-height:450px}.empty-preview,.loading-state{min-height:350px}.inspiration-grid{grid-template-columns:repeat(2,1fr)}.template-strip{grid-template-columns:1fr 1fr}.analysis-panel{min-height:360px}.chat-intro{display:block}.chat-intro .ghost-button{margin-top:15px}}@media(max-width:620px){.topbar{height:64px;padding:0 14px;gap:12px}.brand{min-width:0}.brand strong{font-size:14px}.top-nav{display:none}.top-actions{margin-left:auto}.status-pill{display:none}.main-content{padding:0 12px 48px}.hero-line{padding:32px 0 22px;align-items:flex-start;gap:20px}.hero-line h1{font-size:30px}.hero-caption{font-size:10px;max-width:120px}.mobile-nav{display:flex;gap:18px;overflow-x:auto;border-bottom:1px solid var(--line);margin:0 -12px;padding:0 12px}.mobile-nav .nav-link{padding:14px 0 12px}.composer-panel,.preview-panel,.library-panel,.settings-panel,.analysis-panel,.chat-panel{padding:17px}.composer-head{margin:22px 0 18px}.composer-head h2,.section-head h2,.settings-intro h2{font-size:19px}.provider-switch{display:block}.provider-switch>div{margin-top:8px}.provider-choice{flex:1}.prompt-box{height:185px;font-size:14px}.prompt-tools{align-items:flex-start;flex-direction:column}.upload-inline{padding-top:3px}.control-bar{grid-template-columns:1fr 1fr}.advanced-grid{grid-template-columns:1fr 1fr}.form-submit{align-items:stretch;flex-direction:column}.primary-button{width:100%}.inspiration-section{padding-top:42px}.section-head{display:block}.section-head>span{display:block;margin-top:8px}.inspiration-grid{grid-template-columns:1fr 1fr;gap:8px}.inspiration-card span{padding:9px;font-size:10px}.library-grid{grid-template-columns:1fr}.library-card{grid-template-columns:84px minmax(0,1fr)}.library-copy p{margin-top:7px}.library-actions{position:static;grid-column:2;margin-top:-5px}.inline-fields,.upscale-options,.two-col-fields{grid-template-columns:1fr}.fine-print{font-size:9px}.chat-message{max-width:90%}.chat-form{display:block}.chat-form .primary-button{width:100%;margin-top:8px}.chat-empty{padding:60px 0}}

/* Reference Image Preview Thumbnail Card */
.ref-thumb-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #171b14;
  border: 1px solid #4a5438;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  animation: fadeIn 0.2s ease-out;
}
.ref-thumb-box {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #0d0f0c;
  border: 1px solid #708544;
  flex-shrink: 0;
}
.ref-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ref-thumb-meta {
  flex: 1;
  min-width: 0;
}
.ref-thumb-meta strong {
  display: block;
  font-size: 13px;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.ref-thumb-meta small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9fac75;
  font-size: 11px;
  margin-top: 4px;
}
.ref-thumb-meta .badge-ref {
  background: #27311d;
  color: var(--lime);
  border: 1px solid #5a6e38;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}
.ref-thumb-del {
  border: 1px solid #5f3e2b;
  background: rgba(245, 162, 107, 0.1);
  color: var(--orange);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.ref-thumb-del:hover {
  background: var(--orange);
  color: #1a0f08;
  border-color: var(--orange);
}

/* Multi-Reference Images Container & Grid (支持多张垫图) */
.ref-multi-container {
  background: #171b14;
  border: 1px solid #4a5438;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  animation: fadeIn 0.2s ease-out;
}
.ref-multi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
}
.ref-multi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #27311d;
  color: var(--lime);
  border: 1px solid #5a6e38;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.ref-multi-tip {
  color: #9fac75;
  font-size: 11px;
  flex: 1;
  min-width: 160px;
}
.ref-add-more-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--lime);
  border: 1px dashed var(--lime);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(215, 243, 95, 0.05);
  transition: all 0.15s ease;
}
.ref-add-more-label:hover {
  background: rgba(215, 243, 95, 0.18);
}
.ref-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.ref-card-item {
  position: relative;
  background: #10130e;
  border: 1px solid #363d2e;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ref-card-thumb {
  position: relative;
  aspect-ratio: 1/1;
  background: #000;
}
.ref-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ref-card-order {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(16, 21, 14, 0.85);
  color: var(--lime);
  font-size: 10px;
  font-family: monospace;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #5a6e38;
}
.ref-card-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(20, 10, 10, 0.85);
  color: var(--orange);
  border: 1px solid #7c4530;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: all 0.15s ease;
}
.ref-card-remove:hover {
  background: var(--orange);
  color: #111;
}
.ref-card-info {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #141712;
}
.ref-card-name {
  font-size: 10px;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ref-card-size {
  font-size: 9px;
  color: var(--muted);
}
.cloud-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1d2517;
  color: var(--lime);
  border: 1px solid #5a6e38;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
}
.cloud-sync-pill.syncing {
  color: #f5a26b;
  border-color: #83533d;
}

/* Upload Block Thumbnail Mode */
.upload-thumb-container {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  width: 100%;
}
.upload-thumb-preview {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--lime);
  flex-shrink: 0;
  background: #0e110c;
}
.upload-thumb-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pixel-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--lime);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #192015;
  border: 1px solid #3d4a2b;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 6px;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Vault Security Lock Screen */
.vault-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 25%, #1d2517 0%, #10110f 75%);
}
.vault-card {
  width: 100%;
  max-width: 410px;
  background: #171b15;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 38px 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.3s ease-out;
}
.vault-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
}
.vault-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.vault-icon-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--lime);
  background: #252b1e;
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 0 20px rgba(215, 243, 95, 0.15);
}
.vault-brand strong {
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--paper);
}
.vault-brand span {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}
.vault-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #20271b;
  border: 1px solid #4a5a32;
  color: var(--lime);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.vault-desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 24px;
}
.vault-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.vault-field-group {
  position: relative;
  display: flex;
  align-items: center;
}
.vault-field-group input {
  width: 100%;
  background: #0f120e;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--paper);
  padding: 13px 44px 13px 14px;
  font-size: 14px;
  letter-spacing: 0.08em;
  outline: none;
  transition: all 0.2s ease;
}
.vault-field-group input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(215, 243, 95, 0.15);
}
.vault-eye-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vault-eye-btn:hover {
  color: var(--paper);
}
.vault-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}
.vault-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.vault-options input[type="checkbox"] {
  accent-color: var(--lime);
}
.vault-submit-btn {
  width: 100%;
  padding: 13px 18px;
  font-size: 13px;
  margin-top: 4px;
}
.vault-error {
  color: #ff9b82;
  background: rgba(255, 110, 80, 0.1);
  border: 1px solid rgba(255, 110, 80, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  text-align: center;
}
.vault-card.is-shaking {
  animation: shake 0.35s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}