@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#301b10;background:#fcf7ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}h1,h2,p{margin-top:0}h1,h2,.top-brand,.side-bottom{font-family:'Playfair Display',Georgia,serif}h1{font-size:clamp(2rem,3vw,3.2rem);line-height:1.08;margin-bottom:.35rem}h2{font-size:1.65rem;margin-bottom:.3rem}.muted{color:#79695e;line-height:1.45}.shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}.sidebar{background:linear-gradient(155deg,#1f130c,#3c2515 58%,#1a100a);color:#f9edda;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.side-logo{font-size:2.8rem;color:#efbb62;text-align:center;padding:.8rem;border-bottom:1px solid #78512e}.side-nav{padding:1rem 0}.side-nav button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#f9edda;padding:1.1rem 1.4rem;font-size:1rem}.side-nav button.active,.side-nav button:hover{background:linear-gradient(90deg,#9a592b,#66401f);border-left:3px solid #e6b65e}.side-bottom{margin-top:auto;text-align:center;white-space:pre-line;color:#e5b35c;font-size:1.55rem;font-style:italic;padding:1.5rem 1rem 3rem;line-height:1.35}.content{min-width:0}.topbar{min-height:72px;background:#fffcf7;border-bottom:1px solid #eadac9;box-shadow:0 4px 15px #39210d0c;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 2rem}.top-brand{font-size:1.75rem;font-weight:700;color:#583014}.user{display:flex;align-items:center;gap:1rem}.signout{background:transparent;border:1px solid #d8bca1;border-radius:10px;padding:.55rem .8rem;color:#5d361d}.studio-main{padding:1.4rem 1.8rem;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:1.2rem;align-items:start}.library-panel{min-width:0}.heading{display:flex;align-items:start;justify-content:space-between;gap:1rem}.heading p{margin-bottom:1.2rem}.add-button,.primary{display:inline-flex;justify-content:center;align-items:center;gap:.4rem;border:1px solid #d6a15d;border-radius:10px;background:linear-gradient(#a96e35,#4b2b14);color:#fff;padding:.75rem 1.3rem;box-shadow:0 5px 12px #6b431b33;font-weight:700;white-space:nowrap}.add-button{cursor:pointer}.filters{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}.filters input,.filters select{height:42px;background:#fffdf9;border:1px solid #e2cfb9;border-radius:9px;padding:0 .8rem;color:#3b261b}.filters input{min-width:0;flex:1}.filters select{max-width:160px}.count{color:#8a6546;font-size:.9rem;white-space:nowrap}.photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}.photo-card{background:#fffdf9;border:1px solid #e8d5bd;border-radius:11px;overflow:hidden;box-shadow:0 6px 14px #48290f12;min-width:0;transition:transform .16s,box-shadow .16s}.photo-card:hover{transform:translateY(-3px);box-shadow:0 12px 22px #48290f20}.photo-card.selected{border-color:#b87a34;box-shadow:0 0 0 2px #d9ac63a6}.photo-pick{display:block;position:relative;width:100%;padding:0;border:0;background:#e9ddce;aspect-ratio:1.13;overflow:hidden}.photo-pick img{display:block;width:100%;height:100%;object-fit:cover}.drag-handle{position:absolute;top:.35rem;left:.4rem;color:#fff;text-shadow:0 1px 3px #000;background:#0005;border-radius:5px;padding:.05rem .3rem}.photo-fields{display:grid;gap:.28rem;padding:.45rem}.photo-fields input,.photo-fields select{width:100%;border:0;background:transparent;color:#301b10;padding:.16rem .2rem}.photo-fields input{font-weight:700}.photo-fields select{color:#82634c;font-size:.8rem}.photo-fields input:focus,.photo-fields select:focus{outline:2px solid #c48b41;border-radius:4px}.destinations{display:flex;gap:.3rem;padding:0 .45rem .4rem}.destination{flex:1;min-width:0;border:1px solid #e5dbcf;background:#f5f2ed;color:#756960;border-radius:7px;padding:.38rem .15rem;font-size:.71rem}.destination.on{background:#f8dfad;border-color:#efc97f;color:#583014;font-weight:700}.remove{width:calc(100% - .9rem);margin:0 .45rem .5rem;padding:.35rem;border:0;background:transparent;color:#9d5037;text-decoration:underline;text-align:right;font-size:.75rem}.preview-panel{position:sticky;top:1rem}.preview-card{border:1px solid #ecd8be;border-radius:16px;background:#fffdf9;padding:1rem;box-shadow:0 10px 28px #5837161a}.preview-header{display:flex;justify-content:space-between;gap:.5rem}.preview-header .muted{font-size:.9rem}.live{font-size:.83rem;white-space:nowrap;color:#485f36}.live:before{content:'●';color:#46ab4b;margin-right:.35rem}.stage{height:clamp(260px,25vw,390px);background:radial-gradient(ellipse at center,#6c4526,#21140e 68%,#140b07);border-radius:11px;position:relative;overflow:hidden;perspective:900px;display:flex;align-items:center;justify-content:center}.plane{position:absolute;width:46%;height:72%;border:2px solid #f7e6cd;border-radius:8px;overflow:hidden;box-shadow:0 15px 35px #0009;background:#624429}.plane img{width:100%;height:100%;object-fit:cover}.plane-left{transform:translateX(-85%) rotateY(45deg) scale(.78);filter:brightness(.78)}.plane-center{z-index:2;transform:translateX(0) scale(1.05)}.plane-right{transform:translateX(85%) rotateY(-45deg) scale(.78);filter:brightness(.78)}.stage button{position:absolute;z-index:3;top:47%;border:1px solid #fff;background:#412719b3;color:#fff;border-radius:50%;font-size:1.7rem;width:39px;height:39px;line-height:1}.stage .previous{left:.6rem}.stage .next{right:.6rem}.preview-caption{text-align:center;color:#755945;margin:.65rem 0}.info-box,.reorder-box{border:1px solid #eddbc1;border-radius:10px;padding:.85rem 1rem;margin-top:.7rem;background:#fffaf2}.reorder-box{background:#f7eddd}.info-box p,.reorder-box p{margin:.2rem 0 0;font-size:.82rem}.actions{display:flex;gap:.6rem;margin-top:1rem}.actions button{flex:1;white-space:normal}.secondary{border:1px solid #dfc5a7;background:#fffaf2;border-radius:9px;padding:.7rem;color:#442719}.draft,.error,.success{padding:.55rem .75rem;border-radius:7px;margin:.8rem 0 0}.draft{background:#fff1cb;color:#7a5013}.error{background:#fff0ee;color:#9b2b25}.success{background:#e9f4e6;color:#355d34}.empty{padding:1rem;text-align:center;color:#856955}.login-screen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 15% 25%,#a66b3c,#26170f 65%);padding:1.25rem}.login-panel{width:min(100%,470px);background:#fffaf2;border:2px solid #e6b467;border-radius:22px;box-shadow:0 25px 65px #1b0e09aa;padding:2rem}.brand-icon{text-align:center;color:#af7236;font-size:2.5rem}.eyebrow{letter-spacing:.16em;font-size:.72rem;font-weight:700;color:#a86633}.login-form{display:grid;gap:1rem}.login-form label{display:grid;gap:.4rem;font-weight:700}.login-form input{border:1px solid #bb9471;border-radius:8px;padding:.75rem;background:#fff}.login-form button{margin-top:.35rem}.login-panel .muted{margin-bottom:1.4rem}
@media(max-width:1250px){.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-main{grid-template-columns:minmax(0,1fr) minmax(320px,.8fr)}}
@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.side-logo,.side-bottom{display:none}.side-nav{display:flex;overflow:auto;padding:.3rem}.side-nav button{white-space:nowrap;width:auto;border-radius:8px;padding:.7rem}.side-nav button.active{border-left:0;border-bottom:3px solid #e6b65e}.studio-main{grid-template-columns:1fr}.preview-panel{position:static;grid-row:1}.stage{height:290px}.photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.topbar{padding:.7rem 1rem;min-height:60px}.top-brand{font-size:1.15rem}.user span{display:none}.studio-main{padding:.9rem}.heading{align-items:center}.heading .muted{font-size:.87rem}.add-button{padding:.65rem .75rem;font-size:.85rem}.filters{flex-wrap:wrap}.filters input{flex-basis:100%}.filters select{flex:1;max-width:none}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.preview-card{padding:.8rem}.preview-header h2{font-size:1.3rem}.preview-header .muted{font-size:.8rem}.live{font-size:.72rem}.stage{height:250px}.actions{flex-direction:column}}
.shell,.content,.studio-main,.library-panel,.preview-panel{min-width:0}
.heading>div,.top-brand,.filters input,.filters select{min-width:0}
@media(max-width:900px){.shell{grid-template-columns:minmax(0,1fr);width:100%;max-width:100%}.studio-main{grid-template-columns:minmax(0,1fr)}}
.photo-card{position:relative}
.photo-fields textarea{display:block;width:100%;border:0;background:transparent;color:#301b10;padding:.16rem .2rem;font:700 .92rem/1.22 'DM Sans',Arial,sans-serif;resize:vertical;min-height:2.6rem}
.photo-fields textarea:focus{outline:2px solid #c48b41;border-radius:4px}
.photo-card .remove{position:absolute;right:.4rem;top:.4rem;width:1.8rem;height:1.8rem;margin:0;padding:0;border:1px solid #f0d7cc;background:#fffbf8;color:#a44735;text-decoration:none;text-align:center;border-radius:8px;font-size:1.25rem;line-height:1}
.selected-mark{position:absolute;top:.4rem;left:.4rem;background:#e8b968;color:#4e2e19;border-radius:50%;width:1.8rem;height:1.8rem;display:grid;place-items:center;font-weight:700}
.photo-card.selected .drag-handle{top:auto;bottom:.35rem}
.mobile-tabs,.mobile-count,.mobile-publish,.mobile-notice{display:none}
.preview-tabs{display:flex;gap:.4rem;margin:.4rem 0 .8rem;padding:.2rem;border-radius:10px;background:#f5eddf}
.preview-tabs button{flex:1;border:0;border-radius:8px;background:transparent;color:#63442c;padding:.55rem .4rem;font-weight:700}
.preview-tabs button.active{background:#76502e;color:#fff;box-shadow:0 2px 7px #3b210d30}
.reorder-controls{display:none}
@media(max-width:600px){
  .sidebar{display:none}
  .topbar{border-bottom:0}
  .mobile-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;margin:.5rem .8rem 0;padding:.2rem;border-radius:14px;background:#f4e9d9;border:1px solid #ead4ba}
  .mobile-tabs button{border:0;border-radius:11px;background:transparent;color:#65432e;padding:.7rem;font-weight:700}
  .mobile-tabs button.active{background:linear-gradient(125deg,#724018,#2e1b11);color:#fff;box-shadow:0 2px 8px #4a2a1455}
  .mobile-notice{display:block;margin:.7rem .8rem 0}
  .shell[data-mobile-tab='photos'] .preview-panel,.shell[data-mobile-tab='preview'] .library-panel{display:none}
  .studio-main{padding:.8rem .8rem 5.5rem}
  .heading h1{display:none}
  .heading .mobile-count{display:block;font-size:1.45rem;margin:0}
  .heading .muted{margin:.2rem 0 .7rem}
  .mobile-publish{display:flex;align-items:center;justify-content:center;gap:.7rem;position:fixed;z-index:20;bottom:max(.65rem,env(safe-area-inset-bottom));left:.8rem;right:.8rem;width:calc(100% - 1.6rem);border:1px solid #e3b366;border-radius:15px;background:linear-gradient(120deg,#9b5d23,#2d190f);color:#fff;box-shadow:0 8px 30px #36201255;padding:.9rem 1rem;font-weight:700;font-size:1rem}
  .publish-count{position:absolute;right:1rem;background:#eec481;color:#3c210e;border-radius:50%;min-width:1.8rem;height:1.8rem;display:grid;place-items:center;font-size:.82rem}
  .photo-card .remove{width:2rem;height:2rem;font-size:1.35rem}
  .photo-card{border-radius:14px;box-shadow:0 5px 14px #4a2a1415}
  .photo-fields textarea{font-family:'Playfair Display',Georgia,serif;font-size:.94rem}
  .destination.on{background:#e5efdf;border-color:#c7dabd;color:#244a2c}
  .preview-panel .actions{display:none}
  .reorder-controls{display:flex;justify-content:flex-end;gap:.25rem;padding:0 .45rem .4rem}
  .reorder-controls button{border:1px solid #e5d1bb;background:#fffaf1;color:#5f3d24;border-radius:7px;width:1.8rem;height:1.7rem;font-weight:700}
}
.removal-menu{position:absolute;z-index:8;top:2.55rem;right:.4rem;width:min(230px,calc(100% - .8rem));padding:.35rem;background:#fffdf9;border:1px solid #d9bea1;border-radius:10px;box-shadow:0 12px 28px #26140d55;display:grid;gap:.25rem}
.removal-menu button{border:0;border-radius:7px;background:#f8efe4;color:#3d2618;padding:.55rem .65rem;text-align:left;font-size:.76rem;line-height:1.25}
.removal-menu button:hover:not(:disabled),.removal-menu button:focus-visible{background:#f1dfca;outline:2px solid #b97d3d;outline-offset:1px}
.removal-menu button.danger{background:#fff0ed;color:#9a2e24;font-weight:700}
.removal-menu button.cancel{background:transparent;color:#765f50;text-align:center}
@media(max-width:600px){.removal-menu{position:fixed;z-index:30;left:.8rem;right:.8rem;top:auto;bottom:5.4rem;width:auto;padding:.6rem;border-radius:15px}.removal-menu button{padding:.8rem;font-size:.9rem}}
@media(hover:none){.photo-card:hover{transform:none}}