:root {
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  color: #17343b;
  background: #eef3f3;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #17343b;
  --marine: #0b5961;
  --deep: #102f38;
  --mist: #eef3f3;
  --line: #d5e0df;
  --muted: #64787c;
  --saffron: #e4af4b;
  --white: #fff;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
button, a { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, .95fr) minmax(420px, 1.05fr); }
.login-panel { align-self: center; width: min(100%, 500px); margin: 0 auto; padding: 48px clamp(28px, 6vw, 72px); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--deep); font-size: 15px; font-weight: 700; text-decoration: none; }
.mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px 10px 10px 3px; color: #fff; background: var(--marine); font-size: 17px; }
.section-label { margin: 0 0 14px; color: var(--marine); font-size: 12px; font-weight: 700; letter-spacing: .035em; }
.login-panel > .section-label { margin-top: 72px; }
h1, h2, p { margin-top: 0; }
.login-panel h1 { margin-bottom: 18px; color: var(--deep); font-size: clamp(40px, 5vw, 59px); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; }
.lede { max-width: 355px; margin-bottom: 26px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.google-button { min-height: 42px; }
.message { min-height: 20px; margin: 13px 0 0; color: var(--marine); font-size: 13px; line-height: 1.5; }
.message.error { color: #a4332a; }
.footnote { max-width: 340px; margin: 28px 0 0; border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.side-note { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 40px clamp(34px, 6vw, 76px); color: #e8f2f0; background: var(--deep); }
.signal { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; }
.signal span, .status-line span { width: 8px; height: 8px; border-radius: 50%; background: #62c7a7; }
.side-note p { max-width: 440px; margin: auto 0; font-size: clamp(24px, 3vw, 35px); font-weight: 500; line-height: 1.32; letter-spacing: -.025em; }
.edge-line { width: 78px; height: 4px; border-radius: 2px; background: var(--saffron); }
.workspace-layout { min-height: 100vh; display: grid; grid-template-columns: 245px minmax(0, 1fr); }
.rail { min-height: 100vh; padding: 27px 18px; color: #e8f2f0; background: var(--deep); }
.rail .brand { color: #fff; padding: 0 8px; }
.rail .mark { color: var(--deep); background: var(--saffron); }
.rail nav { display: grid; gap: 7px; margin-top: 63px; }
.nav-link { padding: 11px 12px; border-radius: 4px; color: #b9cbca; font-size: 13px; text-decoration: none; }
.nav-link:hover, .nav-link.active { color: #fff; background: #1b4249; }
.workspace-content { padding: 39px clamp(22px, 5vw, 68px); }
.workspace-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.workspace-header .section-label { margin-bottom: 7px; }
.workspace-header h1 { margin: 0; color: var(--deep); font-size: 32px; font-weight: 600; letter-spacing: -.035em; }
.signout { border: 1px solid #b8c9c9; border-radius: 4px; padding: 9px 13px; color: var(--ink); background: #fff; cursor: pointer; font-size: 12px; font-weight: 650; }
.welcome-panel { max-width: 650px; margin-top: clamp(45px, 9vh, 100px); border-top: 4px solid var(--saffron); padding: 30px; background: #fff; }
.welcome-mark { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 25px; border-radius: 50%; color: var(--marine); background: #dcefed; font-weight: 700; }
.welcome-panel .section-label { margin-bottom: 10px; }
.welcome-panel h2 { margin-bottom: 11px; color: var(--deep); font-size: 25px; font-weight: 600; }
.welcome-copy { max-width: 470px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.status-line { display: flex; align-items: center; gap: 8px; margin-top: 25px; color: #526b70; font-size: 12px; }
.status-line span { width: 7px; height: 7px; }
@media (max-width: 760px) {
  .login-layout { min-height: 100vh; grid-template-columns: 1fr; }
  .login-panel { padding: 30px 24px; }
  .login-panel > .section-label { margin-top: 57px; }
  .side-note { min-height: 185px; padding: 24px; }
  .side-note p { margin: 30px 0; font-size: 22px; }
  .workspace-layout { grid-template-columns: 1fr; }
  .rail { min-height: 0; display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; }
  .rail nav { display: flex; gap: 3px; margin: 0; }
  .nav-link { padding: 9px 8px; font-size: 11px; }
  .workspace-content { padding: 25px 18px; }
  .welcome-panel { margin-top: 42px; padding: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.prompt-editor { max-width: 74rem; margin: 1.5rem 0; }
.prompt-editor [hidden] { display: none; }
.prompt-editor label { display: grid; gap: .45rem; color: var(--ink); font-size: .86rem; font-weight: 650; }
.prompt-toolbar { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.25rem; }
.prompt-toolbar > label { width: min(100%, 25rem); }
.prompt-toolbar details { max-width: 100%; }
.prompt-toolbar summary { cursor: pointer; padding: .7rem 0; font-weight: 650; color: var(--marine); }
.import-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.import-controls label { min-width: 0; }
.prompt-editor fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.prompt-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); background: white; border: 1px solid var(--line); border-radius: 12px 12px 0 0; overflow: hidden; }
.prompt-sheet { min-width: 0; display: grid; gap: 1.15rem; align-content: start; padding: clamp(1rem, 2vw, 2rem); }
.prompt-sheet h2 { margin: 0; font-size: 1.4rem; letter-spacing: -.035em; }
.prompt-sheet h3 { margin: .25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 1rem; }
.preview-sheet { border-left: 1px solid var(--line); background: #f8faf9; }
.prompt-editor input, .prompt-editor textarea, .prompt-editor select { width: 100%; min-width: 0; padding: .7rem .8rem; border: 1px solid #a9bdbc; border-radius: 6px; background: white; color: var(--ink); font-weight: 400; font-family: inherit; font-size: .95rem; }
.prompt-editor textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.prompt-editor :focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
.setting-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.preview-sheet figure { margin: 0; overflow: hidden; background: var(--deep); color: white; border-radius: 8px; }
.preview-frame { aspect-ratio: 16 / 10; display: grid; place-items: center; background-color: #204850; background-image: radial-gradient(#547377 1px, transparent 1px); background-size: 12px 12px; }
.preview-frame span { background: var(--deep); padding: .4rem .7rem; border-radius: 4px; font-size: .8rem; }
.preview-frame img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.preview-sheet figcaption { padding: .8rem 1rem; font-weight: 650; overflow-wrap: anywhere; }
.prompt-editor .publish-control { display: flex; gap: .5rem; align-items: center; }
.publish-control input { width: 1.1rem; height: 1.1rem; accent-color: var(--marine); }
.prompt-editor footer { display: flex; justify-content: flex-end; padding: .9rem 1.4rem; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; background: white; }
.prompt-editor button { padding: .65rem 1.2rem; border: 0; border-radius: 6px; background: var(--marine); color: white; font-weight: 650; cursor: pointer; }
.prompt-editor button:hover { background: var(--deep); }
.prompt-editor button:disabled { opacity: .55; cursor: wait; }
.prompt-editor [role=status] { white-space: pre-line; overflow-wrap: anywhere; margin-top: .75rem; }
@media (max-width: 1050px) {
  .prompt-columns { grid-template-columns: 1fr; }
  .preview-sheet { border-left: 0; border-top: 1px solid var(--line); }
  .preview-sheet figure { max-width: 27rem; }
}
@media (max-width: 550px) {
  .rail { gap: .65rem; align-items: flex-start; flex-direction: column; }
  .rail nav { flex-wrap: wrap; }
  .setting-pair { grid-template-columns: 1fr; }
}
.prompt-toolbar .library-choices { flex: 1 1 22rem; }
.choice-group legend { margin-bottom: .45rem; padding: 0; font-size: .86rem; font-weight: 650; }
.choice-list { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 12rem; overflow-y: auto; padding: 4px; }
.choice-list label { position: relative; display: block; max-width: 100%; cursor: pointer; }
.choice-list input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.choice-list span { display: block; padding: .5rem .75rem; border: 1px solid #a9bdbc; border-radius: 6px; background: white; overflow-wrap: anywhere; }
.choice-list input:checked + span { color: white; background: var(--marine); border-color: var(--marine); }
.choice-list input:focus-visible + span { outline: 3px solid var(--saffron); outline-offset: 1px; }
.choice-list input:disabled + span { opacity: .6; }

.prompt-editor [data-tag-filter] { padding: .6rem; margin-bottom: .6rem; background: white; border-radius: 6px; }
.prompt-editor [data-tag-filter] strong { font-size: .8rem; }
.prompt-editor [data-tags] span { padding: .25rem .65rem; border-radius: 1rem; }

.catalog-filters { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; margin-bottom: 1rem; }
.catalog-scroll { overflow-x: auto; }
.catalog-scroll table { border-collapse: collapse; width: 100%; text-align: left; background: white; }
.catalog-scroll th, .catalog-scroll td { padding: .65rem; border-bottom: 1px solid var(--line); }
.catalog-scroll img { width: 3rem; height: 3rem; object-fit: cover; border-radius: 4px; }
.catalog-scroll button, .prompt-editor footer button { margin: .15rem; }
.catalog-scroll [data-row-error] { display: block; }

.user-search form, .user-search dialog nav { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; margin:1rem 0; }
.user-search label { display:grid; gap:.35rem; }
.user-search dialog { width:min(54rem,94vw); max-height:90vh; overflow:auto; border:1px solid #ccc; border-radius:1rem; padding:1.5rem; }
.user-search dialog::backdrop { background:rgb(10 28 35 / 55%); }
.user-search dialog > button:first-child { float:right; }
.user-search [data-results], .user-search dialog section { overflow-x:auto; }
.user-search pre { white-space:pre-wrap; overflow-wrap:anywhere; }