/* Studio direction: editorial typography, mineral ink, warm paper, restrained copper. */
:root {
  --ink: #18221e;
  --muted: #78837c;
  --line: #e2e6de;
  --canvas: #f3f4ef;
  --card: #fffefb;
  --soft: #edf0e8;
  --violet: #9f7448;
  --violet-dark: #825935;
  --studio-ink: #18241f;
  --studio-deep: #111a16;
  --studio-copper: #c79b69;
  --studio-paper: #f6f4eb;
  --shadow: 0 18px 45px rgba(26, 38, 29, .055);
}
html { scroll-behavior: smooth; }
body {
  font-family: "Avenir Next", "Hiragino Sans GB", "PingFang SC", sans-serif;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
[role="button"]:focus-visible, a:focus-visible {
  outline: 2px solid var(--studio-copper);
  outline-offset: 3px;
}
::selection { background: #d3bd9c; color: #16221b; }

.brand-mark {
  background: url("/apple-touch-icon.png?v=3") center / cover no-repeat;
  border: 0;
  border-radius: 11px;
  color: transparent;
  box-shadow: 0 6px 14px rgba(16, 29, 20, .2);
}
.brand-spark { display: none; }
.primary, .header-primary {
  position: relative;
  overflow: hidden;
  border: 1px solid #d3ae82;
  background: linear-gradient(135deg, #bb8f5e, #a97542);
  color: #fffdf6;
  box-shadow: 0 9px 20px rgba(123, 82, 43, .15), inset 0 1px #ffffff43;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
}
.primary::after, .header-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, #fff5 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .55s ease;
  pointer-events: none;
}
.primary:hover:not(:disabled), .header-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #c39a6c, #a97542);
  filter: saturate(1.05);
  transform: translateY(-2px);
  box-shadow: 0 15px 26px rgba(123, 82, 43, .2), inset 0 1px #ffffff43;
}
.primary:hover:not(:disabled)::after, .header-primary:hover:not(:disabled)::after { transform: translateX(130%); }
.primary:active:not(:disabled), .header-primary:active:not(:disabled) { transform: translateY(0) scale(.985); }
.secondary {
  background: #f9f8f3;
  border-color: #dce2d7;
  color: #34443a;
  transition: background .2s, border-color .2s, transform .2s;
}
.secondary:hover:not(:disabled) { background: #f1f1e9; border-color: #b8c2b6; transform: translateY(-1px); }

/* Entrance */
.login-view {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(circle at 15% 15%, #2b3a31 0, transparent 38%),
              radial-gradient(circle at 90% 80%, #3a3125 0, transparent 32%), #121b17;
}
.login-view::before, .login-view::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(55vw, 600px);
  aspect-ratio: 1;
  border: 1px solid rgba(213, 182, 138, .11);
  border-radius: 50%;
  box-shadow: 0 0 0 72px #d0aa7910, 0 0 0 145px #d0aa7907;
  animation: ambientOrbit 22s ease-in-out infinite alternate;
}
.login-view::before { left: -15%; top: -25%; }
.login-view::after { right: -24%; bottom: -46%; animation-delay: -8s; }
.login-card {
  width: min(570px, 100%);
  border: 1px solid #46544a;
  border-radius: 26px;
  padding: 47px;
  background: linear-gradient(155deg, rgba(36, 47, 40, .94), rgba(21, 31, 25, .97));
  box-shadow: 0 36px 90px #07100b8c, inset 0 1px #ffffff1c;
  animation: studioEnter .7s cubic-bezier(.2,.8,.2,1) both;
}
.login-card::before {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin-bottom: 25px;
  background: linear-gradient(90deg, var(--studio-copper), transparent);
}
.login-brand strong { letter-spacing: -.035em; }
.login-brand>span:last-child { color: #b3bcb1; }
.login-card h1 {
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  font-size: clamp(29px, 4vw, 35px);
  font-weight: 600;
  letter-spacing: -.04em;
  color: #fffaf1;
}
.login-overview {
  max-width: 46ch;
  margin-bottom: 10px;
  color: #e4e8dc;
  font-size: 15px;
  line-height: 1.8;
}
.login-intro { color: #9baa9b; font-size: 13px; line-height: 1.75; }
.login-card label { color: #c4cec4; }
.login-card input {
  background: #152019;
  border-color: #536155;
  color: #fffaf1;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-card input:focus { border-color: var(--studio-copper); background: #1b2920; box-shadow: 0 0 0 4px #c59b6a26; }
.login-button { margin-top: 18px; font-size: 22px; letter-spacing: .09em; padding: 14px 18px; }
.login-safe { color: #87998b; font-size: 13px; margin-top: 20px; }

/* Creator shell and hero */
.app-view {
  min-height: 100vh;
  background:
    radial-gradient(circle at 95% 2%, #d9dfce6e 0, transparent 34%),
    linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), #e3e8dd66 calc(50% - 1px), #e3e8dd66 50%, transparent 50%),
    var(--canvas);
}
.site-header {
  background: rgba(249, 249, 244, .91);
  border-bottom-color: #e0e6da;
  backdrop-filter: blur(18px);
  box-shadow: 0 4px 26px #26382c09;
}
.header-inner { min-height: 78px; }
.brand strong { letter-spacing: -.045em; font-weight: 800; color: #203027; }
.brand small { color: #87968a; letter-spacing: .06em; }
.quota-pill {
  border: 1px solid #d9e4d7;
  background: #f1f5ee;
  color: #526459;
  border-radius: 100px;
  padding: 9px 14px;
}
.quota-dot { background: #6eb47a; box-shadow: 0 0 0 3px #d9eedb, 0 0 13px #6eb47a66; animation: statusPulse 3.2s ease-in-out infinite; }
.header-primary { border-radius: 9px; letter-spacing: .04em; }
.quiet-button, .icon-button, .lang-button {
  border-color: #dce3d9;
  color: #516158;
  background: #fffefa;
  transition: transform .2s, border-color .2s, background .2s;
}
.quiet-button:hover, .icon-button:hover, .lang-button:hover { background: #f1f4ed; border-color: #b5c1b4; transform: translateY(-2px); }
.lang-button { border: 1px solid #dce3d9; padding: 9px 11px; font-size: 11px; letter-spacing: .08em; }
.creator-shell { max-width: 1280px; padding: 32px 28px 75px; }
.creator-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 266px;
  padding: 43px 52px 75px;
  margin: 0;
  border: 1px solid #3d5545;
  border-radius: 25px;
  color: #f9f7ee;
  background: linear-gradient(115deg, #1b2b23 0%, #17221c 56%, #253328 100%);
  box-shadow: 0 23px 56px #1e382224, inset 0 1px #ffffff17;
  animation: studioEnter .55s ease both;
}
.creator-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 79% 15%, #b9935e3e, transparent 31%),
              repeating-linear-gradient(135deg, transparent 0 45px, #fff2 46px, transparent 47px);
}
.creator-heading::after {
  content: "";
  position: absolute;
  right: 6%;
  top: -130px;
  width: 405px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #c5a57c44;
  box-shadow: 0 0 0 48px #c5a57c14, 0 0 0 97px #c5a57c0e, 0 0 0 147px #c5a57c08;
  transform: rotate(-18deg);
  animation: heroOrbit 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.creator-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 27px;
  color: #d9b891;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}
.creator-eyebrow i { display: inline-block; height: 1px; width: 28px; background: #c8a77988; }
.creator-heading h1 {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-bottom: 12px;
  color: #fffaf0;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  font-weight: 600;
  font-size: clamp(37px, 4vw, 49px);
  letter-spacing: -.055em;
  line-height: 1.18;
}
.creator-heading p { position: relative; z-index: 1; color: #b6c3b5; font-size: 15px; line-height: 1.7; }
.creator-grid { position: relative; z-index: 1; margin-top: -39px; gap: 26px; grid-template-columns: minmax(0,1fr) 330px; }
.creator-main { gap: 20px; }
.creator-main>.panel:nth-child(1) { animation: studioEnter .58s .09s both; }
.creator-main>.panel:nth-child(2), .creator-main>.panel:nth-child(3) { animation: studioEnter .58s .16s both; }
.creator-main>.panel:nth-child(4) { animation: studioEnter .58s .22s both; }
.summary-panel { animation: studioEnter .58s .22s both; }
.panel, .summary-panel {
  border: 1px solid #e0e6dd;
  border-radius: 17px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.panel { padding: 27px 30px; transition: border-color .25s, box-shadow .25s; }
.panel:hover { border-color: #cbd8cb; box-shadow: 0 20px 48px #21332412; }
.panel h2, .summary-panel h2 { color: #23332a; letter-spacing: -.035em; font-size: 18px; font-weight: 800; }
.section-help { color: #647568; font-size: 12px; line-height: 1.75; }
.format-panel { background: #fffffc; }
.format-panel h2::before {
  content: "01";
  display: inline-block;
  margin-right: 11px;
  color: #ad8153;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.04em;
}
.format-options { gap: 12px; }
.format-option {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  min-height: 116px;
  padding: 17px;
  border: 1px solid #dce3d9;
  border-radius: 12px;
  background: linear-gradient(145deg, #fffffc, #f7f8f3);
  color: #26392d;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), border-color .26s, box-shadow .26s, background .26s;
}
.format-option::after {
  position: absolute;
  right: 15px;
  bottom: -19px;
  color: #dbe2d8;
  font-family: Georgia, serif;
  font-size: 74px;
  line-height: 1;
  opacity: .42;
  pointer-events: none;
}
.format-option[data-format="pptx"]::after { content: "01"; }
.format-option[data-format="docx"]::after { content: "02"; }
.format-option[data-format="xlsx"]::after { content: "03"; }
.format-option:hover:not(.selected) { transform: translateY(-4px); border-color: #9eaf9e; box-shadow: 0 12px 24px #1e322510; }
.format-option.selected {
  padding: 16px;
  border: 2px solid #c5a375;
  background: linear-gradient(135deg, #25372d, #18261d);
  color: #f9f6e9;
  box-shadow: 0 13px 24px #1a322325, inset 0 1px #ffffff28;
}
.format-option.selected::after { color: #bca077; opacity: .16; }
.format-option strong { position: relative; z-index: 1; margin-bottom: 9px; font-size: 14px; letter-spacing: -.02em; }
.format-option small { position: relative; z-index: 1; color: #5d6e61; line-height: 1.5; }
.format-option.selected small { color: #b9c6b6; }
.format-icon { position: relative; z-index: 1; width: 34px; height: 29px; border-radius: 6px; font-size: 9px; letter-spacing: .06em; }
.format-icon.ppt { color: #7e5f39; background: #eee3d2; }
.format-icon.doc { color: #526e6a; background: #e4eeea; }
.format-icon.xls { color: #527352; background: #e4eee0; }
.format-option.selected .format-icon { background: #c9a979; color: #18261d; }

/* Form, style and file surfaces */
.page-select-label { color: #65766b; }
.page-select-label select, .topic-panel textarea, .email-panel input {
  border: 1px solid #d9e1d7;
  background: #fbfcf7;
  color: #24352b;
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.page-select-label select { border-radius: 8px; }
.topic-panel textarea { min-height: 190px; border-radius: 11px; font-size: 15px; }
.topic-panel textarea:focus, .email-panel input:focus { border-color: #b88e5b; background: #fffefa; box-shadow: 0 0 0 4px #c4a47124; }
.topic-panel textarea::placeholder, .email-panel input::placeholder { color: #7d8b7e; }
.char-count { color: #9da99f; }
.required, .count-badge { color: #9a7449; background: #f0e9dd; }
.style-options { gap: 13px; }
.style-option {
  position: relative;
  min-height: 142px;
  border-color: #dce4da;
  border-radius: 12px;
  background: #fcfdf9;
  color: #25382c;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s, background .25s;
}
.style-option:hover:not(:disabled) { transform: translateY(-4px); border-color: #b79c77; box-shadow: 0 13px 24px #192e2012; }
.style-option.selected { padding: 17px; border: 2px solid #b78d59; background: linear-gradient(135deg, #fbf8ef, #f6f3e9); box-shadow: 0 0 0 3px #cba97825; }
.style-option strong { color: #25372c; font-size: 14px; }
.style-option small { color: #657767; }
.style-option em { color: #a0794b; font-weight: 750; }
.style-symbol { width: 32px; height: 32px; border-radius: 8px; background: #e8eee5; color: #6a806c; }
.selected .style-symbol { background: #eaddc9; color: #9b713f; }
.option-radio { border-color: #b8c5b8; }
.selected .option-radio { border-color: #b78d59; }
.hint { color: #a78252; }
.drop-zone {
  border: 1px dashed #b7c9b8;
  border-radius: 13px;
  background: repeating-linear-gradient(135deg, #f8faf5 0 15px, #f5f8f2 15px 16px);
  color: #859789;
  transition: transform .23s, border-color .23s, background .23s;
}
.drop-zone:hover, .drop-zone.dragging { transform: translateY(-2px); border-color: #b78e5d; background: #f8f4e9; }
.drop-zone strong { color: #405449; }
.upload-glyph { background: #e9ede3; color: #8f714d; }
.upload-item { background: #f2f5ef; }
.upload-heading-actions button { color: #947149; }
.kind-option { border-color: #dce4da; background: #fbfcf8; color: #53675a; transition: transform .2s, background .2s, border-color .2s; }
.kind-option:hover { transform: translateY(-2px); border-color: #acbaa9; }
.kind-option.selected { border-color: #b78d59; background: #f5eee1; color: #805e36; }

/* The summary is the dark anchor of the composition. */
.summary-panel {
  top: 96px;
  overflow: hidden;
  border-color: #385143;
  color: #eff4e9;
  background: linear-gradient(155deg, #25382d, #17251d 70%, #1d2b21);
  box-shadow: 0 18px 42px #1d332328, inset 0 1px #ffffff1b;
}
.summary-panel::before {
  content: "";
  position: absolute;
  right: -105px;
  top: -112px;
  width: 225px;
  aspect-ratio: 1;
  border: 1px solid #c6a37432;
  border-radius: 50%;
  box-shadow: 0 0 0 38px #c6a3740b, 0 0 0 79px #c6a37407;
  pointer-events: none;
}
.summary-panel h2 { position: relative; color: #f9f7ed; font-family: "Songti SC", "STSong", Georgia, serif; font-weight: 600; font-size: 22px; }
.summary-panel h2::after { content: ""; display: block; width: 42px; height: 2px; margin-top: 16px; background: #cba374; }
.summary-row { position: relative; border-top-color: #ffffff1d; color: #b2c1b2; }
.summary-row strong, .dark-creator .summary-row strong { color: #f3f3e8; }
.summary-icon { color: #d5ae7f; background: #ffffff13; }
.summary-note, .dark-creator .summary-note { color: #aeb9ac; background: #ffffff0b; }
.summary-panel .primary { border-color: #d6b688; }
.summary-panel .secondary { border-color: #627465; background: #ffffff0c; color: #e9f0e8; }
.summary-panel .secondary:hover:not(:disabled) { background: #ffffff1b; border-color: #a4b8a1; }
.summary-safe { color: #94a895; }
.site-footer { color: #849085; }
.site-footer button { color: #637768; }

/* Galleries and dialogs */
.modal-layer { background: #0e1814b8; backdrop-filter: blur(9px); animation: veilIn .2s ease both; }
.small-modal, .history-modal, .style-modal, .preview-modal {
  border: 1px solid #e2e5dd;
  border-radius: 20px;
  background: #fffefa;
  box-shadow: 0 35px 100px #05150b69;
  animation: modalEnter .33s cubic-bezier(.2,.8,.2,1) both;
}
.small-modal h2, .modal-header h2 { font-family: "Songti SC", "STSong", Georgia, serif; color: #24372b; font-weight: 600; }
.modal-glyph { background: #eee6da; color: #997148; }
.small-modal input, .style-toolbar input { border-color: #d9e2d7; background: #fbfcf7; }
.small-modal input:focus { border-color: #b88e5b; }
.modal-x { color: #819085; transition: color .2s, transform .2s; }
.modal-x:hover { color: #405445; transform: rotate(90deg); }
.history-item { border-color: #dde5db; background: #fcfdf9; transition: transform .2s, border-color .2s, box-shadow .2s; }
.history-item:hover { transform: translateY(-2px); border-color: #b79b75; box-shadow: 0 8px 22px #1d33220f; }
.artifact-link { color: #9c7447; }
.style-tabs button { border-color: #dde5da; color: #53675a; background: #fbfcf8; }
.style-tabs button.active { border-color: #bfa880; color: #8c6339; background: #f5eee4; }
.style-card { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.style-card:hover { transform: translateY(-5px); }
.style-thumb { border-radius: 9px; box-shadow: 0 9px 21px #2637281d; }
.preview-slide { box-shadow: 0 10px 26px #2637281c; }

/* Administrator uses the same visual system. */
.admin-body { background: #f3f4ef; }
.admin-login { background: radial-gradient(circle at 25% 10%, #2c4433, transparent 42%), #141e18; }
.admin-login-card { border: 1px solid #d9e2d6; border-radius: 20px; box-shadow: 0 30px 70px #07110a5c; }
.admin-login-card h1 { font-family: "Songti SC", "STSong", Georgia, serif; }
.admin-sidebar { background: linear-gradient(165deg, #22352a, #14221a); }
.admin-sidebar a.active, .admin-sidebar a:hover { background: #ffffff19; }
.admin-topline h1 { font-family: "Songti SC", "STSong", Georgia, serif; color: #24362a; font-size: 37px; font-weight: 600; }
.admin-topline p, .admin-controls label { color: #657568; }
.eyebrow { color: #a27c51; }
.local-badge { background: #e8f2e7; color: #497d50; }
.metric, .admin-section { border-color: #dfe6da; background: #fffefa; box-shadow: 0 14px 32px #1f35230c; }
.metric { transition: transform .22s, box-shadow .22s; }
.metric:hover { transform: translateY(-3px); box-shadow: 0 19px 36px #1f352319; }
.metric small, .metric em, .admin-section p { color: #67776a; }
.metric strong { font-family: Georgia, "Songti SC", serif; color: #26392c; }
th { background: #f1f4ed; color: #526456; }
td { border-bottom-color: #e8eee5; }
.status-pill.pending { background: #f4ecdf; color: #8d6a42; }
.disk-bar { background: #e8ede3; }
.disk-bar span { background: linear-gradient(90deg, #6a8b6a, #b29567); }
.issued-wrap code { background: #f3eee4; color: #795b37; }

/* Theme toggle keeps cards readable while the hero and summary stay dark. */
.dark-creator {
  --ink: #e7eee7;
  --muted: #a9b9ab;
  --line: #415347;
  --canvas: #18221c;
  --card: #25332a;
  --soft: #2d3b30;
  --shadow: 0 18px 45px #06110b36;
}
.dark-creator .app-view { background: radial-gradient(circle at 80% 5%, #2c44316b, transparent 36%), var(--canvas); }
.dark-creator .site-header { background: #1e2d23ed; border-color: #405346; }
.dark-creator .brand strong, .dark-creator .panel h2 { color: #edf4e8; }
.dark-creator .brand small, .dark-creator .section-help { color: #a1b3a3; }
.dark-creator .quota-pill { background: #293b2d; border-color: #48604c; color: #c6d5c2; }
.dark-creator .quiet-button, .dark-creator .icon-button, .dark-creator .lang-button {
  background: #2a3c2e; border-color: #4e654f; color: #e7f0e3;
}
.dark-creator .quiet-button:hover, .dark-creator .icon-button:hover, .dark-creator .lang-button:hover {
  background: #354b38; border-color: #8aa687; color: #fffaf0;
}
.dark-creator .panel { background: var(--card); border-color: #405345; }
.dark-creator .format-option, .dark-creator .style-option, .dark-creator .kind-option {
  background: #29392d; border-color: #4a5d4b; color: #eef2e7;
}
.dark-creator .format-option.selected { background: linear-gradient(135deg, #334c38, #263b2b); border-color: #c6a371; }
.dark-creator .format-option strong, .dark-creator .style-option strong { color: #edf3e8; }
.dark-creator .format-option small, .dark-creator .style-option small { color: #b2c0af; }
.dark-creator .style-option.selected, .dark-creator .kind-option.selected { background: #374534; border-color: #b99a6d; }
.dark-creator .topic-panel textarea, .dark-creator .email-panel input, .dark-creator .page-select-label select {
  background: #1d2c22; color: #eef3e8; border-color: #506150;
}
.dark-creator .drop-zone { background: #203126; color: #b4c1b1; border-color: #607866; }
.dark-creator .drop-zone strong { color: #e4eee1; }
.dark-creator .summary-panel { background: linear-gradient(155deg, #263b2c, #111d16); border-color: #50624d; }
.dark-creator .site-footer, .dark-creator .site-footer button { color: #a9bca9; }

@keyframes studioEnter {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes modalEnter {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ambientOrbit { from { transform: translate(-15px, -8px) rotate(-7deg); } to { transform: translate(23px, 17px) rotate(9deg); } }
@keyframes heroOrbit { from { transform: translate(-7px, 0) rotate(-18deg); } to { transform: translate(13px, 10px) rotate(18deg); } }
@keyframes statusPulse { 50% { box-shadow: 0 0 0 5px #d9eedb, 0 0 18px #6eb47aaa; } }

@media (max-width: 900px) {
  .creator-heading { min-height: 235px; padding: 35px 34px 68px; }
  .creator-heading::after { right: -150px; opacity: .58; }
  .creator-grid { margin-top: -33px; }
  .summary-panel { position: relative; top: auto; }
}
@media (max-width: 620px) {
  .site-header { background: #fafaf5ee; }
  .header-inner { min-height: 86px; padding: 9px 13px; }
  .brand strong { font-size: 14px; }
  .header-actions { gap: 5px; }
  .header-primary, .quiet-button, .icon-button, .lang-button { border-radius: 7px; }
  .quota-pill { padding: 5px 7px; }
  .creator-shell { padding: 14px 12px 42px; }
  .creator-heading {
    min-height: 214px;
    padding: 25px 21px 58px;
    border-radius: 17px;
  }
  .creator-heading::after { width: 260px; right: -175px; top: -47px; opacity: .48; }
  .creator-eyebrow { font-size: 8px; margin-bottom: 22px; }
  .creator-heading h1 { font-size: 28px; line-height: 1.28; max-width: 100%; text-wrap: balance; }
  .creator-heading p { font-size: 12px; max-width: 100%; text-wrap: pretty; }
  .creator-grid { margin-top: -25px; gap: 11px; }
  .creator-main>.panel { width: 100%; }
  .panel {
    padding: 21px 19px;
    border: 1px solid #dfe6da;
    border-radius: 14px;
    background: #fffefa;
    box-shadow: 0 8px 22px #1d332209;
  }
  .panel h2, .summary-panel h2 { font-size: 16px; }
  .format-panel { padding: 22px 19px 19px; }
  .format-options { grid-template-columns: 1fr; gap: 8px; }
  .format-option { min-height: 79px; padding: 12px !important; }
  .format-option.selected { padding: 11px !important; }
  .format-option::after { font-size: 58px; bottom: -14px; }
  .format-option strong { margin-bottom: 4px; }
  .format-option small { font-size: 11px; }
  .topic-panel textarea { min-height: 190px; }
  .style-option { min-height: 103px; }
  .summary-panel {
    margin-top: 0;
    padding: 22px 20px;
    border: 1px solid #425746;
    border-radius: 14px;
    background: linear-gradient(155deg, #25382d, #17251d 70%);
  }
  .summary-panel h2 { color: #f9f7ed; }
  .admin-content { padding: 25px 14px; }
  .admin-topline h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}