:root{font-family:"DM Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eaf0fb;background:#0a1120;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#0c1423}button,input,textarea{font:inherit}button{cursor:pointer;transition:background .16s ease,transform .16s ease,color .16s}button:disabled{opacity:.48;cursor:not-allowed}
.hidden{display:none!important}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 88% 0%,#223a52a6 0%,transparent 38%),radial-gradient(ellipse at 20% 96%,#1c2443b0 0%,transparent 55%)}
.workspace{position:relative;display:grid;grid-template-columns:292px minmax(0,1fr);min-height:100vh;max-width:2000px;margin:auto}
.sidebar{background:#0e1728e8;border-right:1px solid #2b3b53;padding:29px 19px 18px;display:flex;flex-direction:column;min-height:100vh}
.brand{display:flex;gap:13px;align-items:center;padding:0 12px 30px;border-bottom:1px solid #27364b}
.logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#0e2432;background:linear-gradient(135deg,#a5fff0,#77dbe5);box-shadow:0 8px 20px #1cbaa333;font-size:27px}
.brand-name{font-family:Manrope,sans-serif;font-size:11px;letter-spacing:1.8px;font-weight:800;color:#eaf6fd;display:block}
.brand small{display:block;color:#92a6bd;font-size:12px;margin-top:4px}.owner-label{margin:25px 13px 20px;font-size:10px;font-weight:800;letter-spacing:1.7px;color:#72919f}
.green-dot{width:7px;height:7px;border-radius:10px;background:#61e4be;display:inline-block;margin-left:3px;box-shadow:0 0 11px #61e4be88}
.side-section{min-height:120px}.heading-row{display:flex;align-items:center;justify-content:space-between;color:#98abc7;font-size:11px;letter-spacing:1.8px;font-weight:800;margin:0 13px 14px}
.icon-button{border:1px solid #344660;border-radius:8px;background:#18253a;color:#b8e8e0;width:27px;height:27px;font-size:19px}
.icon-button:hover{background:#2b4653}.template-list{display:flex;flex-direction:column;gap:3px;max-height:calc(100vh - 320px);overflow:auto}
.template-row{display:flex;align-items:center;gap:10px;width:100%;padding:12px 12px;color:#aebdd2;background:transparent;border:1px solid transparent;border-radius:10px;text-align:left}
.template-row:hover{background:#1a2940}.template-row.active{background:#1e3347;border-color:#305263;color:#eeffff}
.template-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#253047;color:#82ccc6;flex-shrink:0;font-size:14px}
.template-row.active .template-icon{background:#245a5b;color:#c1ffe8}.template-name{font-size:12px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.template-id{font-size:10px;display:block;margin-top:3px;color:#758ca4}
.side-bottom{margin-top:auto}.side-card{background:linear-gradient(135deg,#213246,#15253a);border:1px solid #34445c;border-radius:14px;padding:17px;margin:24px 1px 18px}
.side-card-label{color:#85b8c0;font-size:10px;letter-spacing:1.7px;font-weight:800;margin-bottom:11px}
#side-status{font-size:14px;font-weight:700}#side-status-desc{color:#96a8bf;font-size:11px;line-height:1.6;margin-top:6px}
.logout{border:0;background:transparent;color:#90a7bb;text-align:left;padding:12px 16px}
.main{min-width:0;background:linear-gradient(135deg,#101b2da8 0%,#111d30ab 65%,#121b30a8 100%);position:relative}
.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid #2c3b52;gap:18px}
.breadcrumb{font-size:10px;letter-spacing:1.65px;font-weight:800;color:#8294ae;white-space:nowrap}.breadcrumb span{font-size:16px;color:#578984;margin:0 12px}
.toolbar-actions{display:flex;align-items:center;gap:9px}.button{border-radius:9px;border:1px solid transparent;padding:11px 17px;display:inline-flex;gap:7px;align-items:center;justify-content:center;white-space:nowrap;font-weight:700;font-size:12px}.secondary{background:#19283b;border-color:#384963;color:#cbd8e8}.secondary:hover{background:#233950}
.primary{background:#a2f1d9;color:#0b2e2b;box-shadow:0 2px 8px #0a57402e}.primary:hover{background:#c2ffe5}.arrow{margin-left:8px}
.badge{font-size:10px;font-weight:800;border-radius:999px;padding:8px 10px;white-space:nowrap}.badge-orange{background:#462f28;color:#ffc091;border:1px solid #70513a}.badge-green{background:#1a3d37;color:#9ce9c5;border:1px solid #296356}
.content{max-width:1000px;margin:0 auto;padding:49px 48px 55px}
.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:800;color:#7accbd}.separator{color:#506982;margin:0 10px}
h1,h2,h3{font-family:Manrope,ui-sans-serif,sans-serif;letter-spacing:-.04em}
.content-top h1{font-size:clamp(26px,3vw,38px);margin:11px 0 9px;font-weight:800}.period{color:#95efd2}
.content-top p{margin:0;color:#93a7bd;font-size:13px}
.editor-card{border:1px solid #30435b;border-radius:18px;background:linear-gradient(140deg,#1a2940 0%,#16243a 100%);padding:28px 31px;margin-top:28px;box-shadow:0 20px 55px #00000026}
.card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;gap:12px}.card-heading h2{font-size:21px;margin:8px 0 0;font-weight:700}.tiny-heading{font-size:10px;font-weight:800;letter-spacing:1.9px;color:#88d4c2}.danger-outline{background:#2b2433;border-color:#624154;color:#ffbdc2}.danger-outline:hover{background:#543144}
.field{display:flex;flex-direction:column;gap:9px;margin:17px 0 0;color:#aebed2;font-size:12px;font-weight:700}
.fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:19px}
input,textarea{min-width:0;width:100%;border:1px solid #41536a;border-radius:9px;outline:none;padding:13px 15px;color:#e3f1fd;background:#0f1b2e;font-size:13px;font-weight:500;transition:border .2s}
input:focus,textarea:focus{border-color:#82d4bc;box-shadow:0 0 0 3px #8ce6c116}input:read-only{color:#7993a6;background:#152336}
textarea{resize:vertical;min-height:82px;line-height:1.65}.field-title{display:flex;align-items:center;justify-content:space-between}.format-toolbar{display:flex;gap:4px}
.format-toolbar button{background:#29374c;color:#bbd3e2;border:1px solid #435772;border-radius:6px;width:31px;height:28px}
.format-toolbar button:hover{background:#3e526c}.helper{font-size:11px;color:#7994a8;line-height:1.6;margin-top:7px;font-weight:400}.helper code{color:#b9dac8;background:#1c3440;padding:2px 4px;border-radius:3px}
.divider{height:1px;background:#33445a;margin:30px 0}
.media-header{display:flex;justify-content:space-between;align-items:center;gap:15px}.media-header h3{font-size:17px;margin:8px 0}.media-header p{font-size:12px;color:#91a6ba;margin:0}
.media-pill{border:1px solid #3b6270;color:#81b6bb;border-radius:99px;padding:7px 12px;font-size:9px;font-weight:800;letter-spacing:1.4px;white-space:nowrap}
.format-switch{display:flex;gap:6px;background:#101c2e;padding:5px;border:1px solid #2e3c53;border-radius:10px;margin-top:23px;width:max-content;max-width:100%;overflow-x:auto}
.format-switch button{border:0;background:transparent;color:#8e9fbb;padding:10px 16px;border-radius:7px;font-size:12px;font-weight:700}.format-switch button:hover{color:white}.format-switch button.active{background:#a2efd5;color:#143931}
.upload-area{margin:19px 0 14px;background:#112237;border:1px dashed #527a83;padding:20px;border-radius:12px;display:flex;flex-direction:column;gap:4px;align-items:center;cursor:pointer}
.upload-area:hover{background:#1c3145}.upload-area strong{font-size:13px;color:#d5f5ed}.upload-area span{font-size:11px;color:#91adbd}.upload-symbol{font-size:26px;color:#a0ead5;margin-bottom:4px}
.media-item{border:1px solid #344a5e;background:#132438;padding:13px;border-radius:12px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;margin-bottom:10px}
.media-item img{width:96px;height:92px;object-fit:cover;border-radius:8px;background:#0d1523}.media-item-info{display:flex;flex-direction:column;gap:8px}.media-item-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.media-item input{padding:9px;font-size:11px}.media-item-info .row{display:flex;justify-content:space-between;align-items:center;gap:8px}.media-item-info .row span{font-size:10px;color:#9ab8ca}.mini-btn{background:#26364a;border:1px solid #45576a;color:#c7dded;padding:5px 8px;border-radius:7px;font-size:11px}.mini-btn:hover{background:#34516a}
.footerline{display:flex;justify-content:space-between;gap:12px;color:#7089a1;font-size:11px;margin:24px 0}
.notice{position:fixed;right:34px;bottom:30px;z-index:8;padding:13px 20px;background:#214e45;border:1px solid #418f79;box-shadow:0 18px 40px #0006;border-radius:10px;font-size:12px;font-weight:700;max-width:460px}
.notice.error{background:#58333b;border-color:#99586a}
.empty{padding:50px;text-align:center;color:#afc9da;border:1px dashed #3a5067;border-radius:14px;margin-top:28px}
.login{position:relative;display:grid;place-items:center;min-height:100vh;padding:20px}
.login-card{width:min(440px,100%);padding:44px;background:#1a2b41;border:1px solid #38516a;border-radius:23px;box-shadow:0 30px 100px #0006}
.logo.large{width:55px;height:55px;font-size:37px;margin-bottom:22px}.login-card h1{font-size:35px;margin:10px 0}.login-card p{color:#9db0c5;font-size:13px;line-height:1.65;margin-bottom:26px}
.login-card label{color:#bbccdf;font-size:12px;font-weight:700}.login-card input{margin:10px 0 14px}.full{width:100%;padding:14px 20px;border-radius:10px;display:flex;justify-content:space-between}
.login-card .error{color:#ffadb2;min-height:14px;margin:10px 0 0;font-size:11px}
.modal{border:1px solid #45647d;border-radius:19px;background:#172a40;color:#eff7ff;max-width:480px;width:calc(100% - 30px);padding:30px;box-shadow:0 32px 95px #000a}
.modal::backdrop{background:#020912b8;backdrop-filter:blur(6px)}
.modal h2{font-size:25px;margin:11px 0}.modal p{color:#aabed1;font-size:12px;line-height:1.7}.modal-icon{width:41px;height:41px;background:#24554c;color:#a3ffde;display:grid;place-items:center;border-radius:12px;font-size:22px;margin-bottom:18px}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:22px}.modal .field textarea{min-height:76px}
.history-modal{max-height:80vh;overflow:auto}#history-list{display:flex;flex-direction:column;gap:9px;margin-top:22px}.history-entry{padding:14px 15px;background:#11243a;border:1px solid #334a61;border-radius:9px}.history-entry strong{font-size:13px;color:#abecd8}.history-entry p{margin:5px 0}.history-entry small{font-size:10px;color:#789bad}
@media(max-width:980px){.workspace{grid-template-columns:246px 1fr}.sidebar{padding-inline:13px}.topbar{padding:0 22px}.content{padding:32px 24px}.badge{display:none}.toolbar-actions{gap:6px}}
@media(max-width:720px){.workspace{display:flex;flex-direction:column}.sidebar{min-height:auto;padding:13px 12px;border-bottom:1px solid #34445a;border-right:0}.brand{padding:0 7px 10px}.owner-label,.side-bottom{display:none}.heading-row{margin:2px 4px 8px}.side-section{min-height:auto}.template-list{flex-direction:row;overflow-x:auto;max-height:none;padding:9px 3px 3px}.template-row{width:auto;min-width:145px;max-width:176px;padding:9px}.template-name{max-width:120px}.template-row .template-icon{display:none}.topbar{padding:11px 14px;height:auto;align-items:flex-start;gap:9px;flex-direction:column}.toolbar-actions{width:100%}.toolbar-actions .button{flex:1;padding:10px 8px;font-size:11px}.content{padding:23px 14px}.content-top h1{font-size:26px}.editor-card{padding:19px 16px;margin-top:19px}.fieldgrid{grid-template-columns:1fr;gap:0}.card-heading{align-items:flex-start}.card-heading h2{font-size:17px}.danger-outline{padding:10px}.format-switch{width:100%;justify-content:space-between}.format-switch button{padding:9px 8px}.media-header{align-items:flex-start}.media-pill{display:none}.media-item{grid-template-columns:70px 1fr;gap:9px}.media-item img{width:70px;height:74px}.media-item-inputs{grid-template-columns:1fr}.footerline{flex-direction:column}.breadcrumb{font-size:9px}}
/* App-like mobile behavior (Jecca, 2026-10-14): no pinch zoom, no left-right pan */
html,body{overflow-x:hidden;max-width:100%}
body{touch-action:manipulation;-webkit-text-size-adjust:100%}
@media (max-width:820px){
 input,textarea,select{font-size:16px}
 .workspace{grid-template-columns:1fr;min-height:auto}
 .sidebar{min-height:0;border-right:0;border-bottom:1px solid #2b3b53;padding:16px 14px 10px}
 .brand{padding:0 4px 14px}
 .owner-label{margin:12px 4px 8px}
 .side-section{min-height:0}
 .template-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;padding-bottom:8px;gap:8px}
 .template-row{flex:0 0 auto}
 .topbar{height:auto;padding:14px 16px;flex-wrap:wrap}
 .content{padding:20px 16px 40px}
 .notice{right:16px;left:16px;bottom:16px;max-width:none}
}

/* Sticky Save bar (Jecca, 2026-10-14): Save button always visible + persistent status */
#sticky-save{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#0e1728f5;border-top:1px solid #2b3b53;backdrop-filter:blur(8px)}
#sticky-save-btn{flex:0 0 auto;background:#a2f1d9;color:#0b2e2b;border:0;border-radius:10px;padding:13px 22px;font-weight:800;font-size:15px;box-shadow:0 2px 8px #0a57402e}
#sticky-save-btn:active{transform:scale(.98)}
#sticky-save-status{font-size:12px;font-weight:700;color:#9ce9c5}
body{padding-bottom:72px}

#save-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28)}
#save-overlay.hidden{display:none}
.save-card{background:#fff;border-radius:16px;padding:26px 34px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.3);font-size:17px;font-weight:700;color:#1d1d1f;min-width:190px;max-width:86vw;text-align:center}
.save-spinner{width:38px;height:38px;border-radius:50%;border:4px solid #d2d2d7;border-top-color:#0071e3;animation:save-spin .8s linear infinite}
@keyframes save-spin{to{transform:rotate(360deg)}}
#save-overlay.success .save-spinner{display:none}
#save-overlay.success #save-overlay-text{color:#1a7f37;font-size:24px}
#save-overlay.error .save-spinner{display:none}
#save-overlay.error #save-overlay-text{color:#b42318;font-size:16px}
button.saving{opacity:.55}

#sticky-save-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}

#sticky-add-btn{flex:0 0 auto;background:#22314a;color:#cfe3ff;border:1px solid #3b587f;border-radius:10px;padding:13px 16px;font-weight:800;font-size:15px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sticky-add-btn:active{transform:scale(.98)}

/* App-like mobile behavior v2 (Jecca, 2026-10-14): no pinch zoom, no left-right pan */
html,body{overflow-x:hidden;max-width:100%;overscroll-behavior:none}
body{touch-action:pan-y;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
@media (max-width:820px){
  input,textarea,select{font-size:16px}
  .workspace{grid-template-columns:1fr;min-height:auto}
  .sidebar{min-height:0;border-right:0;border-bottom:1px solid #2b3b53;padding:16px 14px calc(10px + env(safe-area-inset-bottom))}
  .brand{padding:0 4px 14px}
  .owner-label{margin:12px 4px 8px}
  .side-section{min-height:0}
  .template-list{flex-direction:row;flex-wrap:wrap;overflow:visible;max-height:none;padding-bottom:8px;gap:8px}
  .template-row{flex:0 1 auto}
  .topbar{height:auto;padding:14px 16px;flex-wrap:wrap}
  .content{padding:20px 16px calc(40px + env(safe-area-inset-bottom))}
  .notice{right:16px;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:none}
}