/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;font-family:'Google Sans','Segoe UI',Arial,sans-serif;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}
input,select{font-family:inherit;}
ul{list-style:none;}

/* ===== VARIABLES ===== */
:root{
  --blue:#4285F4; --red:#EA4335; --yellow:#FBBC05; --green:#34A853;
  --bg:#FFFFFF; --card:#F8F9FA; --border:#DADCE0; --text:#202124;
  --grid-color:#E8EAED; --radius:16px; --shadow:0 2px 10px rgba(60,64,67,.15), 0 1px 2px rgba(60,64,67,.3);
  --transition:.25s cubic-bezier(.4,0,.2,1);
}
body.dark{
  --bg:#202124; --card:#292A2D; --border:#3C4043; --text:#E8EAED; --grid-color:#33343a;
}
body{background:var(--bg);color:var(--text);transition:background var(--transition),color var(--transition);}

/* ===== LAYOUT ===== */
#app{display:flex;flex-direction:column;height:100vh;width:100vw;}
.navbar{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border-bottom:1px solid var(--border);padding:0 16px;z-index:50;flex-shrink:0;
}
.nav-left{display:flex;align-items:center;gap:10px;}
.logo-box{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.brand{font-weight:600;font-size:16px;}
.nav-center{flex:1;display:flex;justify-content:center;}
.doc-name{background:transparent;border:1px solid transparent;text-align:center;font-size:14px;padding:6px 10px;border-radius:8px;color:var(--text);width:260px;}
.doc-name:hover,.doc-name:focus{border-color:var(--border);outline:none;background:var(--bg);}
.nav-right{display:flex;align-items:center;gap:4px;}
.icon-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background var(--transition);color:var(--text);}
.icon-btn:hover{background:rgba(66,133,244,.12);}
.dropdown{position:relative;}
.dropdown-menu{position:absolute;top:42px;right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);min-width:150px;display:none;overflow:hidden;z-index:100;}
.dropdown-menu.show{display:block;}
.dropdown-menu div{padding:10px 14px;font-size:13px;cursor:pointer;}
.dropdown-menu div:hover{background:rgba(66,133,244,.1);}

.panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:200;}
.panel-overlay.show{display:flex;}
.panel{background:var(--card);border-radius:var(--radius);width:360px;max-height:70vh;padding:20px;box-shadow:var(--shadow);overflow:auto;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:600;}
.panel-head button{font-size:16px;color:var(--text);}
.primary-btn{background:var(--blue);color:#fff;padding:10px;width:100%;border-radius:10px;margin-bottom:12px;font-weight:500;transition:var(--transition);}
.primary-btn:hover{opacity:.9;}
.boards-list .board-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;}
.boards-list .board-item span{cursor:pointer;font-size:13px;}
.boards-list .board-item .actions button{font-size:12px;margin-left:6px;color:var(--text);}

.canvas-wrap{flex:1;position:relative;display:flex;overflow:hidden;}
.ruler{position:absolute;background:var(--card);z-index:20;}
.ruler-top{top:0;left:24px;right:0;height:24px;width:calc(100% - 24px);}
.ruler-left{top:24px;left:0;bottom:0;width:24px;height:calc(100% - 24px);}
.canvas-scroll{position:absolute;top:24px;left:24px;right:0;bottom:0;overflow:hidden;}
#mainCanvas{background:var(--bg);display:block;cursor:crosshair;}

.sidebar{
  position:absolute;top:16px;right:16px;width:230px;max-height:calc(100% - 32px);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px;overflow:auto;z-index:30;font-size:12px;
}
.sidebar-tabs{display:flex;gap:4px;margin-bottom:10px;}
.tab{flex:1;padding:6px;border-radius:8px;font-size:12px;color:var(--text);}
.tab.active{background:var(--blue);color:#fff;}
.tab-content.hidden{display:none;}
.prop-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:6px;}
.prop-row label{color:var(--text);opacity:.7;flex-shrink:0;}
.prop-row input[type=range]{flex:1;}
.prop-row select{flex:1;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);padding:4px;}
.prop-row.btns{gap:4px;}
.chip{flex:1;padding:6px 4px;border:1px solid var(--border);border-radius:8px;font-size:11px;background:var(--bg);color:var(--text);transition:var(--transition);}
.chip:hover{background:rgba(66,133,244,.12);}
.chip.active{background:var(--blue);color:#fff;}
.chip.danger:hover{background:rgba(234,67,53,.15);color:var(--red);}
.grid-settings{margin-top:10px;border-top:1px solid var(--border);padding-top:10px;}
.layers-list .layer-item{display:flex;align-items:center;gap:6px;padding:6px;border-radius:6px;font-size:11px;}
.layer-item:hover{background:rgba(66,133,244,.08);}
.layer-item.active{background:rgba(66,133,244,.18);}
.layer-item input.lname{flex:1;border:none;background:transparent;color:var(--text);font-size:11px;}
.layer-item button{color:var(--text);font-size:11px;}

.minimap{position:absolute;bottom:96px;right:16px;width:180px;height:120px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);z-index:30;cursor:pointer;}

/* ===== TOOLBAR ===== */
.toolbar{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;background:var(--card);
  border:1px solid var(--border);border-radius:20px;padding:6px 10px;
  box-shadow:var(--shadow);z-index:40;max-width:94vw;overflow-x:auto;
}
.tool{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:var(--text);transition:var(--transition);}
.tool:hover{background:rgba(66,133,244,.12);}
.tool.active{background:var(--blue);color:#fff;}
.tool.small{width:auto;padding:0 8px;font-size:11px;}
.sep{width:1px;height:24px;background:var(--border);margin:0 4px;flex-shrink:0;}
.tool-color{width:28px;height:28px;border:none;border-radius:8px;padding:0;flex-shrink:0;cursor:pointer;}
.tool-range{width:80px;flex-shrink:0;}
#zoomLabel{font-size:11px;width:36px;text-align:center;flex-shrink:0;}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.panel{animation:fadeIn .25s ease;}
.dropdown-menu.show{animation:fadeIn .2s ease;}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .sidebar{width:180px;font-size:11px;}
  .doc-name{width:140px;}
  .minimap{display:none;}
}
@media (max-width:600px){
  .sidebar{display:none;}
  .toolbar{max-width:98vw;padding:6px;}
  .doc-name{width:90px;font-size:12px;}
}
.logo-box {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px; /* Optional */
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ya cover agar pura fill chahiye */
  display: block;
}