@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --bg:#f4f7ff;
  --bg-2:#dbe7ff;
  --turquoise:#21b9d8;
  --blue:#3d63ff;
  --text:#0d1f36;
  --muted:#5d6f8c;
  --panel:rgba(255,255,255,.92);
  --panel-alt:rgba(255,255,255,.8);
  --radius:22px;
  --shadow:0 18px 50px rgba(15,38,80,.18);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; min-height:100%; font-family:'Outfit', 'Space Grotesk', system-ui, sans-serif; color:var(--text); background:linear-gradient(140deg, #f7faff 0%, #dfe8ff 50%, #c8dcff 100%); }
a { color:var(--blue); text-decoration:none; }
.studio-body { min-height:100vh; display:flex; flex-direction:column; background:transparent; }
.studio-body.no-scroll, body.no-scroll { overflow:hidden; }
.studio-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:24px clamp(16px,4vw,60px); gap:16px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand .orb { width:42px; height:42px; border-radius:50%; background:radial-gradient(circle, #fff, #d8efff, #8dd6ff); box-shadow:0 0 18px rgba(79,163,255,.35); }
.brand strong { font-size:1.2rem; }
.brand small { color:var(--muted); display:block; }
.studio-nav { display:flex; gap:14px; flex-wrap:wrap; }
.studio-nav a { padding:10px 18px; border-radius:999px; border:1px solid rgba(13,31,58,.08); font-weight:600; color:#0b1e35; background:#fff; box-shadow:0 8px 20px rgba(24,76,140,.12); }
.studio-nav a.active { background:linear-gradient(125deg, #89f0ff, #3d72ff); color:#071226; border-color:transparent; box-shadow:0 12px 24px rgba(61,114,255,.3); }
.studio-nav a.danger { background:linear-gradient(125deg,#ff7a8c,#e94267); border-color:transparent; color:#fff; box-shadow:0 12px 22px rgba(233,66,103,.25); }

.studio-main { flex:1; display:grid; grid-template-columns:3fr 1.3fr; gap:24px; padding:0 clamp(16px,4vw,60px) 40px; }
@media (max-width:1100px){ .studio-main { grid-template-columns:1fr; } }
.drawing-main { flex:1; display:grid; padding:0 clamp(16px,4vw,60px) 40px; }
.drawing-app { position:relative; }
.draw-header { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.draw-header.actions-only { justify-content:flex-end; margin-bottom:16px; }
.draw-header.actions-only .quick-actions { justify-content:flex-end; }
.draw-header.actions-only .btn { padding:9px 18px; font-size:.9rem; }
.draw-header h1 { margin:0 0 6px; }
.draw-header p { margin:0; color:var(--muted); }
.quick-actions { display:flex; gap:10px; flex-wrap:wrap; }
.canvas-panel, .tool-panel { background:var(--panel); border:1px solid rgba(15,30,60,.08); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); backdrop-filter:blur(18px); color:var(--text); }
.panel-head { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.panel-head h1, .panel-head h2 { margin:0 0 4px; }
.panel-head p { margin:0; color:var(--muted); }
.quota { text-align:right; }
.quota span { display:block; color:var(--muted); font-size:.85rem; }
.quota strong { font-size:1.8rem; }
.canvas-stage { margin:24px auto 0; position:relative; border-radius:22px; overflow:hidden; background:var(--canvas-bg, #fff); border:1px solid rgba(13,31,58,.12); box-shadow:inset 0 0 30px rgba(6,24,55,.08); width:100%; max-width:1024px; min-height:200px; display:flex; align-items:center; justify-content:center; }
.canvas-stage canvas { position:relative; z-index:2; width:100%; height:100%; display:block; background:#fff; touch-action:none; object-fit:contain; }
.stage-actions { position:absolute; inset:auto 24px 24px 24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
.drawing-app .stage-actions { position:static; margin-top:18px; justify-content:space-between; align-items:center; }
.stage-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.pill { padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.9); border:1px solid rgba(13,31,58,.08); font-weight:600; color:#0b1a32; box-shadow:0 8px 20px rgba(24,76,140,.12); }
.quota-meter { margin-top:18px; padding:16px 20px; border-radius:18px; border:1px solid rgba(15,30,60,.1); background:rgba(255,255,255,.9); display:flex; flex-direction:column; gap:10px; color:#081a2d; box-shadow:0 10px 30px rgba(15,38,80,.1); }
.quota-text span { font-size:.85rem; color:var(--muted); }
.quota-text strong { font-size:1.4rem; display:block; }
.quota-text small { color:var(--muted); }
.quota-progress { width:100%; height:10px; border-radius:999px; background:rgba(13,31,58,.08); overflow:hidden; }
.quota-progress span { display:block; height:100%; background:linear-gradient(120deg,#5a7cff,var(--turquoise)); }
.quota-meter.low .quota-progress span { background:linear-gradient(120deg,#f59e0b,#f97316); }
.quota-meter.full .quota-progress span { background:linear-gradient(120deg,#fb7185,#ef4444); }
.quota-warning { margin:0; font-size:.9rem; color:#fcd34d; }
.quota-meter.full .quota-warning { color:#fda4af; }
.status-line { margin-top:14px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); }
.status-line .link { color:var(--turquoise); font-weight:600; }
.status-line .badge { margin-left:auto; padding:6px 12px; border-radius:999px; background:rgba(28,214,209,.25); color:#042132; font-weight:700; font-size:.85rem; }
.status-line .badge[hidden] { display:none; }
.debug-panel { margin-top:16px; padding:14px 18px; border-radius:16px; border:1px dashed rgba(33,185,216,.5); background:rgba(255,255,255,.85); color:#0c213a; font-size:.9rem; white-space:pre-line; line-height:1.3; box-shadow:0 10px 30px rgba(34,80,140,.15); }
body[data-debug="0"] .debug-panel[hidden] { display:none !important; }
.bg-overlay { position:absolute; inset:0; pointer-events:none; z-index:1; width:100%; height:100%; }
.btn { border:none; border-radius:999px; padding:12px 22px; font-weight:700; cursor:pointer; transition:.2s transform,.2s box-shadow; }
.btn.primary { background:linear-gradient(115deg, #4b8dff, #45e0ff); box-shadow:0 12px 30px rgba(48,118,255,.25); color:#fff; }
.btn.ghost { background:#eef3ff; color:#102447; border:1px solid rgba(18,53,122,.12); box-shadow:0 6px 20px rgba(27,71,140,.12); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.btn.small { padding:8px 16px; font-size:.85rem; }
.btn.full { width:100%; }
.btn:hover { transform:translateY(-2px); }

.tool-grid { margin-top:18px; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.tool-grid label { display:flex; flex-direction:column; font-weight:600; gap:6px; }
.tool-grid input[type=range] { accent-color:var(--turquoise); }
.swatch { height:80px; border-radius:16px; border:1px solid rgba(13,31,58,.1); background:radial-gradient(circle at top, rgba(33,185,216,.35), transparent); }
.chip-grid { display:flex; flex-wrap:wrap; gap:10px; grid-column:1/-1; }
.chip { border:none; border-radius:12px; padding:10px 16px; font-weight:700; cursor:pointer; background:rgba(14,31,58,.06); color:#081a2e; border:1px solid rgba(14,31,58,.08); }
.chip[aria-pressed="true"] { border-color:var(--turquoise); box-shadow:0 0 12px rgba(28,214,209,.35); background:rgba(33,185,216,.15); }
.status { min-height:28px; color:var(--muted); }
.file-btn { width:100%; justify-content:center; }
.file-btn input { display:none; }
.tb-column textarea { width:100%; border-radius:12px; border:1px solid rgba(13,31,58,.15); background:rgba(255,255,255,.9); color:#081a2e; padding:10px; font-family:inherit; resize:vertical; }
.tb-column select { width:100%; padding:10px; border-radius:10px; border:1px solid rgba(13,31,58,.15); background:rgba(255,255,255,.9); color:#081a2e; }

.gallery-main, .admin-main { padding:0 clamp(16px,4vw,60px) 60px; }
.gallery-shell .gallery-main { padding:0; }
.gallery-shell .gallery-grid { margin-top:24px; }
.gallery-bucket { margin-top:34px; }
.gallery-user-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.gallery-user-head h3 { margin:0; color:#0d1f36; }
.gallery-user-head small { color:#5b6d86; display:block; }
.toolbar { position:fixed; top:50%; left:50%; width:clamp(320px, min(92vw, 1100px), 1100px); height:clamp(360px, 90vh, 860px); max-height:92svh; background:rgba(245,248,255,.94); border:1px solid rgba(10,40,66,.2); border-radius:26px; box-shadow:0 30px 90px rgba(8,17,32,.35); display:grid; grid-template-rows:auto 1fr auto; gap:0; overflow:hidden; z-index:80; transform:translate(-50%, -50%) scale(.9); opacity:0; pointer-events:none; transition:.25s transform,.25s opacity; backdrop-filter:blur(28px); padding:0; color:#041726; }
.toolbar.open { transform:translate(-50%, -50%) scale(1); opacity:1; pointer-events:auto; }
.tb-head { display:flex; align-items:flex-start; gap:12px; padding:16px 22px; border-bottom:1px solid rgba(10,40,66,.12); background:rgba(255,255,255,.78); }
.tb-head .tb-title { font-weight:700; font-size:1.1rem; }
.tb-grip { height:18px; display:flex; align-items:center; justify-content:center; background:rgba(10,40,66,.05); border-bottom:1px solid rgba(10,40,66,.08); }
.tb-grip span { width:50px; height:4px; border-radius:999px; background:rgba(10,40,66,.25); display:inline-block; }
.tb-body { padding:20px; overflow-y:auto; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.tb-column { display:flex; flex-direction:column; gap:20px; }
.group { background:rgba(255,255,255,.95); border:1px solid rgba(13,31,58,.08); border-radius:18px; padding:18px; display:grid; gap:14px; color:#071a2c; box-shadow:0 10px 30px rgba(15,38,80,.08); }
.hdr { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:#395676; }
.seg { display:flex; flex-wrap:wrap; gap:10px; }
.seg[role="toolbar"] { display:flex; flex-wrap:wrap; gap:12px; }
.seg[role="toolbar"].tool-grid { display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); gap:12px; }
.toolbar .chip { display:flex; align-items:center; gap:8px; border-radius:12px; border:1px solid rgba(8,32,54,.15); background:rgba(8,32,54,.05); color:#052035; padding:9px 12px; font-weight:600; white-space:nowrap; }
.toolbar .chip[aria-pressed="true"] { border-color:var(--turquoise); background:rgba(28,214,209,.18); box-shadow:0 0 18px rgba(28,214,209,.25); color:#02111c; }
.format-grid { display:flex; flex-wrap:nowrap; gap:10px; overflow-x:auto; scrollbar-width:none; }
.format-grid::-webkit-scrollbar { display:none; }
.format-grid .chip { flex:1 1 auto; justify-content:center; text-align:center; }
.toolbar .chip input { accent-color:var(--turquoise); }
.toolbar label { font-weight:600; display:grid; gap:6px; color:#041627; }
.range-field { gap:8px; }
.range-inline { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.65); border:1px solid rgba(8,32,54,.2); border-radius:10px; padding:6px 10px; }
.range-inline input[type=number] { width:80px; border:none; background:transparent; color:#072641; font-weight:600; font-size:1.05rem; }
.range-inline input[type=number]:focus { outline:none; }
.range-inline span { color:#3d5877; font-size:.85rem; }
.toolbar input[type=color] { width:100%; height:48px; border-radius:12px; border:1px solid rgba(8,32,54,.2); background:transparent; }
.bg-color { display:grid; gap:12px; }
.bg-swatch { position:relative; overflow:hidden; border:1px solid rgba(8,32,54,.22); }
.bg-swatch input[type=color] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.bg-label { position:absolute; bottom:12px; right:14px; padding:4px 10px; border-radius:999px; background:rgba(8,32,54,.45); font-weight:700; font-size:.9rem; letter-spacing:.08em; color:#f4fbff; }
.tb-foot { padding:16px 22px; border-top:1px solid rgba(10,40,66,.12); background:rgba(255,255,255,.82); display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:#061726; }
.toast-stack { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); display:grid; gap:10px; z-index:120; pointer-events:none; }

@media (max-width: 880px){
  .drawing-main { padding:0 16px 40px; }
  .draw-header { flex-direction:column; }
  .quick-actions { width:100%; justify-content:flex-start; }
  .toolbar { width:min(94vw, 520px); height:min(94svh, 92vh); border-radius:22px; }
  .tb-body { grid-template-columns:1fr; }
}
.gallery-grid { display:grid; gap:22px; grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:30px; }
.card { background:var(--panel-alt); border-radius:18px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px; color:#05152a; }
.card-media { border-radius:14px; overflow:hidden; border:1px solid rgba(8,32,54,.15); }
.card-media img { width:100%; height:220px; object-fit:cover; display:block; }
.card-meta { display:flex; justify-content:space-between; align-items:center; }
.card-meta span, .card-meta small { color:var(--muted); }
.polaroid { background:#fff; color:#111; border-radius:24px; padding:22px 22px 26px; box-shadow:0 30px 60px rgba(5,8,20,.45); border:none; }
.polaroid-frame { width:100%; border-radius:16px; border:6px solid #fff; background:#f5f5f5; display:flex; align-items:center; justify-content:center; min-height:220px; }
.polaroid-frame img { width:var(--preview-w, 200px); height:var(--preview-h, 200px); object-fit:cover; background:#fdfdfd; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.15); }
.polaroid-meta { margin-top:16px; display:grid; gap:6px; font-size:.9rem; color:#1b2135; }
.polaroid-meta .meta-row { display:flex; justify-content:space-between; font-weight:600; border-bottom:1px dashed rgba(0,0,0,.1); padding-bottom:4px; }
.polaroid-meta span { color:#6b7280; font-weight:500; }
.polaroid-actions { display:flex; gap:10px; margin-top:14px; }
.polaroid-actions form { flex:1; }
.polaroid-actions .btn { width:100%; justify-content:center; }
.alert { padding:14px 18px; border-radius:12px; background:rgba(33,185,216,.15); margin-bottom:18px; color:#0c213a; border:1px solid rgba(14,31,58,.08); }
.gallery-quota { margin-bottom:18px; border-radius:20px; padding:0; background:linear-gradient(120deg,#eff6ff,#dcecff); border:1px solid rgba(14,31,58,.08); box-shadow:0 15px 40px rgba(19,51,112,.12); overflow:hidden; position:relative; }
.gallery-quota-progress { width:100%; height:48px; background:rgba(14,31,58,.08); position:relative; }
.gallery-quota-progress span { position:absolute; inset:0; display:block; border-radius:20px; background:linear-gradient(120deg, #6fdcff, #6b8dff); box-shadow:0 8px 18px rgba(34,80,140,.2); }
.gallery-quota-text.inside { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#0c213a; font-weight:700; }

.auth-body { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 16px; background:linear-gradient(140deg,#f7fbff,#dfe7ff 60%,#c8dcff);}
.auth-panel { width:min(420px, 100%); background:#fff; padding:32px; border-radius:20px; box-shadow:0 25px 60px rgba(19,51,112,.16); border:1px solid rgba(14,31,58,.08); margin-bottom:24px; }
.auth-form label { display:block; margin-bottom:14px; font-weight:600; color:#0d1f36; }
.auth-form input { width:100%; margin-top:6px; padding:12px; border-radius:12px; border:1px solid rgba(7,27,45,.15); background:#f9fbff; color:#051929; }
.muted { color:var(--muted); }

.admin-grid { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:30px; }
.admin-card { background:#fff; border:1px solid rgba(14,31,58,.08); border-radius:24px; padding:22px; color:#0d1f36; box-shadow:0 18px 45px rgba(15,38,80,.12); }
.admin-card header { margin-bottom:12px; }
.admin-card h3 { margin:0; color:#0d1f36; font-size:1.2rem; }
.admin-card small { color:#5b6d86; }
.meta-line { margin-bottom:6px; color:#5b6d86; font-size:.85rem; }
.quota-bar .progress { width:100%; height:10px; background:rgba(255,255,255,.3); border-radius:999px; overflow:hidden; margin-bottom:6px; }
.quota-bar .progress span { display:block; height:100%; background:linear-gradient(120deg,#6fdcff,#6b8dff); }
.admin-form label input { margin-top:6px; width:100%; padding:10px; border-radius:10px; border:1px solid rgba(7,27,45,.15); background:rgba(255,255,255,.95); color:#041a2d; }
.form-actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

.app-footer { width:100%; margin-top:auto; padding:30px clamp(16px,4vw,60px) 40px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; color:#0f2336; font-size:.9rem; background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(13,37,60,.4)); border-top:1px solid rgba(255,255,255,.4); }
.app-footer-links { display:flex; gap:16px; flex-wrap:wrap; }
.legal-link { color:var(--turquoise); font-weight:600; }
.auth-legal { margin-top:18px; display:flex; gap:8px; align-items:center; justify-content:center; color:#5b6d86; font-size:.85rem; }
.auth-legal .legal-link { font-weight:600; color:#3d63ff; }

@media (max-width:880px){
  .gallery-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .studio-main { grid-template-columns:1fr; }
  .drawing-main { padding:0 clamp(12px,4vw,32px) 32px; }
  .canvas-panel { padding:22px; }
  .studio-header { flex-direction:column; align-items:flex-start; }
  .studio-nav { width:100%; overflow-x:auto; scrollbar-width:none; }
  .studio-nav::-webkit-scrollbar { display:none; }
  .stage-actions { position:static; padding:18px; justify-content:center; }
  .canvas-stage { width:100%; max-width:100%; }
  .gallery-grid { grid-template-columns:1fr; }
}
@media (max-width:540px){
  .studio-header { padding:16px 14px; gap:12px; }
  .brand strong { font-size:1rem; }
  .studio-nav { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:100%; gap:8px; }
  .studio-nav::-webkit-scrollbar { display:none; }
  .studio-nav a { flex:1 0 auto; text-align:center; font-size:.85rem; padding:8px 10px; min-width:100px; }
  .canvas-panel { padding:16px; border-radius:16px; }
  .draw-header.actions-only { justify-content:stretch; }
  .quick-actions { flex-direction:column; width:100%; gap:8px; }
  .quick-actions .btn { width:100%; text-align:center; }
  .stage-buttons { width:100%; justify-content:stretch; flex-direction:column; }
  .stage-buttons .btn { width:100%; }
  .quota-meter { text-align:center; align-items:center; gap:6px; width:100%; }
  .status-line { flex-direction:column; gap:8px; align-items:flex-start; }
  .drawing-main { padding:0 12px 32px; }
  .canvas-stage { min-height:180px; margin-top:12px; border-radius:16px; }
  .toolbar { width:min(94vw, 420px); height:min(92vh, 640px); }
}